siesta-lite/docs/output/Siesta.Test.ActionTarget.js

Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers

Ext.data.JsonP.Siesta_Test_ActionTarget({"tagname":"class","name":"Siesta.Test.ActionTarget","autodetected":{},"files":[{"filename":"ActionTarget.js","href":"ActionTarget.html#Siesta-Test-ActionTarget"}],"members":[],"alternateClassNames":[],"aliases":{},"id":"class-Siesta.Test.ActionTarget","short_doc":"This class exists only for documentation purposes and does not contain any actual code. ...","component":false,"superclasses":[],"subclasses":[],"mixedInto":[],"mixins":[],"parentMixins":[],"requires":[],"uses":[],"html":"<div><pre class=\"hierarchy\"><h4>Files</h4><div class='dependency'><a href='source/ActionTarget.html#Siesta-Test-ActionTarget' target='_blank'>ActionTarget.js</a></div></pre><div class='doc-contents'><p>This class exists only for documentation purposes and does not contain any actual code.</p>\n\n<p>It describes how Siesta resolves the targets for various methods (like \"click\", \"type\" etc) from values of different types\nto DOM elements.\nFramework specific testing classes enhances these rules with additional logic (see below).</p>\n\n<h2><a href=\"#!/api/Siesta.Test.Browser\" rel=\"Siesta.Test.Browser\" class=\"docClass\">Siesta.Test.Browser</a></h2>\n\n<p>This is a generic browser testing class. On this level, <a href=\"#!/api/Siesta.Test.ActionTarget\" rel=\"Siesta.Test.ActionTarget\" class=\"docClass\">Siesta.Test.ActionTarget</a> can be:</p>\n\n<ul>\n<li><p>An <code>HTMLElement</code>. Action will be performed with this element. When coordinates are involved, the center of element will be used.</p></li>\n<li><p>An array with 2 elements: <code>[ x, y ]</code>. Will be converted to the DOM element at the specified screen coordinates.</p>\n\n<pre><code>  await t.click([ 100, 100 ])\n</code></pre></li>\n<li><p>A string, denoting a DOM query with CSS selector:</p>\n\n<pre><code>  await t.click('.x-grid')\n</code></pre></li>\n</ul>\n\n\n<p>Only the first element from the query results will be used.</p>\n\n<ul>\n<li><p>A string, containing the <code>-&gt;</code> characters, which will split the string into 2 parts, both should be CSS selectors. The 1st selector\nshould 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.</p>\n\n<pre><code>  await t.click('.my-frame -&gt; .my-el')\n  await t.click('my-webcomponent -&gt; input')\n</code></pre></li>\n</ul>\n\n\n<h2><a href=\"#!/api/Siesta.Test.ExtJS\" rel=\"Siesta.Test.ExtJS\" class=\"docClass\">Siesta.Test.ExtJS</a> and <a href=\"#!/api/Siesta.Test.SenchaTouch\" rel=\"Siesta.Test.SenchaTouch\" class=\"docClass\">Siesta.Test.SenchaTouch</a></h2>\n\n<p>These classes both extends <a href=\"#!/api/Siesta.Test.Browser\" rel=\"Siesta.Test.Browser\" class=\"docClass\">Siesta.Test.Browser</a> with additional logic, specific for testing ExtJS and Sencha Touch applications.</p>\n\n<p>When using these classes, in addition to the rules above, <a href=\"#!/api/Siesta.Test.ActionTarget\" rel=\"Siesta.Test.ActionTarget\" class=\"docClass\">Siesta.Test.ActionTarget</a> can also be:</p>\n\n<ul>\n<li><p>An instance of Ext.dom.Element (or the like class in Sencha Touch)</p></li>\n<li><p>An instance of Ext.Component. Will be converted to the DOM element using its <code>getEl()</code> method or similar</p></li>\n<li><p>A string, containing <a href=\"#!/api/Siesta.Test.ExtJS-method-compositeQuery\" rel=\"Siesta.Test.ExtJS-method-compositeQuery\" class=\"docClass\">composite query</a></p>\n\n<pre><code>  await t.click('gridpanel[title=foo] =&gt; .x-grid-body')\n</code></pre>\n\n<p>Only the first element from the query results will be used</p></li>\n<li><p>A string, starting with \">>\" and containing the ExtJS component query (see <a href=\"https://docs.sencha.com/extjs/6.5.0/classic/Ext.ComponentQuery.html#method-query\"> Ext.ComponentQuery.query</a>:</p>\n\n<pre><code>  await t.click('&gt;&gt; gridpanel[title=foo]')\n</code></pre>\n\n<p>Will be resolved to the first matching component, and then to DOM element.</p></li>\n<li><p>A string, containing the <code>-&gt;</code> characters, which will split the string into 2 parts. 1st part should be the CSS selector, targeting\nthe 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\nit will be resolved <strong>inside</strong> of the target iframe:</p>\n\n<pre><code>  await t.click('#frameId -&gt; gridpanel[title=foo] =&gt; .x-grid-body')\n  await t.click('#frameId -&gt; &gt;&gt; gridpanel[title=foo]')\n</code></pre></li>\n</ul>\n\n\n<p>Just to summarize, you can pass a string to various siesta methods and depending from your testing class and the format it will mean\ndifferent type of query:</p>\n\n<ul>\n<li><p>String, starting with <code>&gt;&gt;</code> - ExtJS <a href=\"https://docs.sencha.com/extjs/6.5.0/classic/Ext.ComponentQuery.html#method-query\">component query</a></p></li>\n<li><p>String, containng <code>=&gt;</code> - <a href=\"#!/api/Siesta.Test.ExtJS-method-compositeQuery\" rel=\"Siesta.Test.ExtJS-method-compositeQuery\" class=\"docClass\">composite query</a></p></li>\n<li><p>String, containng <code>-&gt;</code> - \"nested query targeting elements inside an iframe or web component \"</p></li>\n<li><p>Other strings - regular CSS query</p></li>\n</ul>\n\n</div><div class='members'></div></div>","meta":{}});