TestCafe v0.11.0 Released

Redesigned selector system, built-in assertions and lots of bug fixes! 🚀🚀🚀

New selector methods #

Multiple filtering and hierarchical methods were introduced for selectors. Now you can build flexible, lazily-evaluated functional-style selector chains.

Here are some examples:

Selector ( ' ul ' ). find ( ' label ' ). parent ( ' div.someClass ' )

Finds all ul elements on page. Then, in each found ul element finds label elements. Then, for each label element finds a parent that matches the div.someClass selector.

Like in jQuery, if you request a property of the matched set or try evaluate a snapshot, the selector returns values for the first element in the set.

// Returns id of the first element in the set const id = await Selector ( ' ul ' ). find ( ' label ' ). parent ( ' div.someClass ' ). id ; // Returns snapshot for the first element in the set const snapshot = await Selector ( ' ul ' ). find ( ' label ' ). parent ( ' div.someClass ' )();

However, you can obtain data for any element in the set by using nth filter.

// Returns id of the third element in the set const id = await Selector ( ' ul ' ). find ( ' label ' ). parent ( ' div.someClass ' ). nth ( 2 ). id ; // Returns snapshot for the fourth element in the set const snapshot = await Selector ( ' ul ' ). find ( ' label ' ). parent ( ' div.someClass ' ). nth ( 4 )();

Note that you can add text and index filters in the selector chain.

Selector ( ' .container ' ). parent ( 1 ). nth ( 0 ). find ( ' .content ' ). withText ( ' yo! ' ). child ( ' span ' );

In this example the selector:

finds the second parent (parent of parent) of .container elements; peeks the first element in the matched set; in that element, finds elements that match the .content selector; filters them by text yo! ; in each filtered element, searches for a child with tag name span .

Getting selector matched set length #

Also, now you can get selector matched set length and check matching elements existence by using selector count and exists properties.

Unawaited parametrized selector calls now allowed outside test context #

Previously selector call outside of text context thrown an error:

const selector = Selector ( arg => /* selector code */ ); selector ( ' someArg ' ); // <-- throws test ( ' Some test ' , async t => { ... });

Now it's not a case if selector is not awaited. It's useful when you need to build a page model outside the test context:

const selector = Selector ( arg => /* selector code */ ); const selector2 = selector ( ' someArg ' ). find ( ' span ' ); // <-- doesn't throw anymore test ( ' Some test ' , async t => { ... });

However, once you'll try to obtain element property outside of test context it will throw:

const selector = Selector ( arg => /* selector code */ ); async getId () { return await selector ( ' someArg ' ). id ; // throws } getId (); test ( ' Some test ' , async t => { ... });

Index filter is not ignored anymore if selector returns single node #

Previously if selector returned single node index was ignored:

Selector ( ' #someId ' , { index : 2 } ); // index is ignored and selector returns element with id `someId`

however it's not a case now:

Selector ( ' #someId ' ). nth ( 2 ); // returns `null`, since there is only one element in matched set with id `someId`

t.select method - use Selector instead:

const id = await t . select ( ' .someClass ' ). id ; // can be replaced with const id = await Selector ( ' .someClass ' ). id ;

selectorOptions.index - use selector.nth() instead.

- use selector.nth() instead. selectorOptions.text - use selector.withText() instead.

- use selector.withText() instead. selectorOptions.dependencies - use filtering and hierarchical methods to build combined selectors instead.

TestCafe now ships with numerous built-in BDD-style assertions. If the TestCafe assertion receives a Selector's DOM node state property as an actual value, TestCafe uses the smart assertion query mechanism: if an assertion did not passed, the test does not fail immediately. The assertion retries to pass multiple times and each time it re-requests the actual shorthand value. The test fails if the assertion could not complete successfully within a timeout. This approach allows you to create stable tests that lack random errors and decrease the amount of time required to run all your tests due to the lack of extra waitings.

Example page markup:

<div id= "btn" ></div> <script> var btn = document . getElementById ( ' btn ' ); btn . addEventListener ( function () { window . setTimeout ( function () { btn . innerText = ' Loading... ' ; }, 100 ); }); </script>

Example test code:

test ( ' Button click ' , async t => { const btn = Selector ( ' #btn ' ); await t . click ( btn ) // Regular assertion will fail immediately, but TestCafe retries to run DOM state // assertions many times until this assertion pass successfully within the timeout. // The default timeout is 3000 ms. . expect ( btn . textContent ). contains ( ' Loading... ' ); });

⚙ It's now possible to start browser with arguments. (#905) #

If you need to pass arguments for the specified browser, write them right after browser alias. Surround the browser call and its arguments with quotation marks:

testcafe "chrome --start-fullscreen" ,firefox tests/test.js

See Starting browser with arguments.