siesta-lite
Version:
Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers
88 lines (49 loc) • 3.41 kB
JavaScript
/*
Siesta 5.6.1
Copyright(c) 2009-2022 Bryntum AB
https://bryntum.com/contact
https://bryntum.com/products/siesta/license
*/
/**
@class Siesta.Test.ActionTarget
This class exists only for documentation purposes and does not contain any actual code.
It describes how Siesta resolves the targets for various methods (like "click", "type" etc) from values of different types
to DOM elements.
Framework specific testing classes enhances these rules with additional logic (see below).
Siesta.Test.Browser
-------------------
This is a generic browser testing class. On this level, Siesta.Test.ActionTarget can be:
- An `HTMLElement`. Action will be performed with this element. When coordinates are involved, the center of element will be used.
- An array with 2 elements: `[ x, y ]`. Will be converted to the DOM element at the specified screen coordinates.
await t.click([ 100, 100 ])
- A string, denoting a DOM query with CSS selector:
await t.click('.x-grid')
Only the first element from the query results will be used.
- A string, containing the `->` characters, which will split the string into 2 parts, both should be CSS selectors. The 1st selector
should target iframe element or web comoponent in the main test page, and the 2nd selector is local to the nested context, selecting an element inside it.
await t.click('.my-frame -> .my-el')
await t.click('my-webcomponent -> input')
Siesta.Test.ExtJS and Siesta.Test.SenchaTouch
-------------------
These classes both extends Siesta.Test.Browser with additional logic, specific for testing ExtJS and Sencha Touch applications.
When using these classes, in addition to the rules above, Siesta.Test.ActionTarget can also be:
- An instance of Ext.dom.Element (or the like class in Sencha Touch)
- An instance of Ext.Component. Will be converted to the DOM element using its `getEl()` method or similar
- A string, containing {@link Siesta.Test.ExtJS#compositeQuery composite query}
await t.click('gridpanel[title=foo] => .x-grid-body')
Only the first element from the query results will be used
- A string, starting with ">>" and containing the ExtJS component query (see [ Ext.ComponentQuery.query](https://docs.sencha.com/extjs/6.5.0/classic/Ext.ComponentQuery.html#method-query):
await t.click('>> gridpanel[title=foo]')
Will be resolved to the first matching component, and then to DOM element.
- A string, containing the `->` characters, which will split the string into 2 parts. 1st part should be the CSS selector, targeting
the iframe element in the main test page. 2nd part can be a query of any other type (CSS selector, composite query or component query) and
it will be resolved **inside** of the target iframe:
await t.click('#frameId -> gridpanel[title=foo] => .x-grid-body')
await t.click('#frameId -> >> gridpanel[title=foo]')
Just to summarize, you can pass a string to various siesta methods and depending from your testing class and the format it will mean
different type of query:
- String, starting with `>>` - ExtJS [component query](https://docs.sencha.com/extjs/6.5.0/classic/Ext.ComponentQuery.html#method-query)
- String, containng `=>` - {@link Siesta.Test.ExtJS#compositeQuery composite query}
- String, containng `->` - "nested query targeting elements inside an iframe or web component "
- Other strings - regular CSS query
*/