StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The biggest hurdle in testing ExtJS with Selenium is that ExtJS doesn't render standard HTML elements and the Selenium IDE will naively (and rightfully) generate commands targeted at elements that just act as decor -- superfluous elements that help ExtJS with the whole desktop-look-and-feel. Here are a few tips and tricks that I've gathered while writing automated Selenium test against an ExtJS app.</p> <h1>General Tips</h1> <h2>Locating Elements</h2> <p>When generating Selenium test cases by recording user actions with Selenium IDE on Firefox, Selenium will base the recorded actions on the ids of the HTML elements. However, for most clickable elements, ExtJS uses generated ids like "ext-gen-345" which are likely to change on a subsequent visit to the same page, even if no code changes have been made. After recording user actions for a test, there needs to be a manual effort to go through all such actions that depend on generated ids and to replace them. There are two types of replacements that can be made:</p> <h2>Replacing an Id Locator with a CSS or XPath Locator</h2> <p>CSS locators begin with "css=" and XPath locators begin with "//" (the "xpath=" prefix is optional). CSS locators are less verbose and are easier to read and should be preferred over XPath locators. However, there can be cases where XPath locators need to be used because a CSS locator simply can't cut it.</p> <h2>Executing JavaScript</h2> <p>Some elements require more than simple mouse/keyboard interactions due to the complex rendering carried out by ExtJS. For example, a Ext.form.CombBox is not really a <code><select></code> element but a text input with a detached drop-down list that's somewhere at the bottom of the document tree. In order to properly simulate a ComboBox selection, it's possible to first simulate a click on the drop-down arrow and then to click on the list that appears. However, locating these elements through CSS or XPath locators can be cumbersome. An alternative is to locate the ComoBox component itself and call methods on it to simulate the selection:</p> <pre><code>var combo = Ext.getCmp('genderComboBox'); // returns the ComboBox components combo.setValue('female'); // set the value combo.fireEvent('select'); // because setValue() doesn't trigger the event </code></pre> <p>In Selenium the <code>runScript</code> command can be used to perform the above operation in a more concise form:</p> <pre><code>with (Ext.getCmp('genderComboBox')) { setValue('female'); fireEvent('select'); } </code></pre> <h2>Coping with AJAX and Slow Rendering</h2> <p>Selenium has "*AndWait" flavors for all commands for waiting for page loads when a user action results in page transitions or reloads. However, since AJAX fetches don't involve actual page loads, these commands can't be used for synchronization. The solution is to make use of visual clues like the presence/absence of an AJAX progress indicator or the appearance of rows in a grid, additional components, links etc. For example:</p> <pre><code>Command: waitForElementNotPresent Target: css=div:contains('Loading...') </code></pre> <p>Sometimes an element will appear only after a certain amount of time, depending on how fast ExtJS renders components after a user action results in a view change. Instead of using arbitary delays with the <code>pause</code> command, the ideal method is to wait until the element of interest comes within our grasp. For example, to click on an item after waiting for it to appear:</p> <pre><code>Command: waitForElementPresent Target: css=span:contains('Do the funky thing') Command: click Target: css=span:contains('Do the funky thing') </code></pre> <p>Relying on arbitrary pauses is not a good idea since timing differences that result from running the tests in different browsers or on different machines will make the test cases flaky.</p> <h2>Non-clickable Items</h2> <p>Some elements can't be triggered by the <code>click</code> command. It's because the event listener is actually on the container, watching for mouse events on its child elements, that eventually bubble up to the parent. The tab control is one example. To click on the a tab, you have to simulate a <code>mouseDown</code> event at the tab label:</p> <pre><code>Command: mouseDownAt Target: css=.x-tab-strip-text:contains('Options') Value: 0,0 </code></pre> <h2>Field Validation</h2> <p>Form fields (Ext.form.* components) that have associated regular expressions or vtypes for validation will trigger validation with a certain delay (see the <code>validationDelay</code> property which is set to 250ms by default), after the user enters text or immediately when the field loses focus -- or blurs (see the <code>validateOnDelay</code> property). In order to trigger field validation after issuing the type Selenium command to enter some text inside a field, you have to do either of the following:</p> <ul> <li><p><strong>Triggering Delayed Validation</strong></p> <p>ExtJS fires off the validation delay timer when the field receives keyup events. To trigger this timer, simply issue a dummy keyup event (it doesn't matter which key you use as ExtJS ignores it), followed by a short pause that is longer than the validationDelay:</p> <pre><code>Command: keyUp Target: someTextArea Value: x Command: pause Target: 500 </code></pre></li> <li><p><strong>Triggering Immediate Validation</strong></p> <p>You can inject a blur event into the field to trigger immediate validation:</p> <pre><code>Command: runScript Target: someComponent.nameTextField.fireEvent("blur") </code></pre></li> </ul> <h2>Checking for Validation Results</h2> <p>Following validation, you can check for the presence or absence of an error field:</p> <pre><code>Command: verifyElementNotPresent Target: //*[@id="nameTextField"]/../*[@class="x-form-invalid-msg" and not(contains(@style, "display: none"))] Command: verifyElementPresent Target: //*[@id="nameTextField"]/../*[@class="x-form-invalid-msg" and not(contains(@style, "display: none"))] </code></pre> <p>Note that the "display: none" check is necessary because once an error field is shown and then it needs to be hidden, ExtJS will simply hide error field instead of entirely removing it from the DOM tree.</p> <h1>Element-specific Tips</h1> <h2>Clicking an Ext.form.Button</h2> <ul> <li><p><strong>Option 1</strong></p> <p>Command: click Target: css=button:contains('Save')</p> <p>Selects the button by its caption</p></li> <li><p><strong>Option 2</strong></p> <p>Command: click Target: css=#save-options button</p> <p>Selects the button by its id</p></li> </ul> <h2>Selecting a Value from an Ext.form.ComboBox</h2> <pre><code>Command: runScript Target: with (Ext.getCmp('genderComboBox')) { setValue('female'); fireEvent('select'); } </code></pre> <p>First sets the value and then explicitly fires the select event in case there are observers.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload