TestCafe v0.15.0 Released

Plugins for React and Vue.js, TestCafe Docker image, support for Internet access proxies and lots of bug fixes.

New calls to selector's withText method no longer override previous calls #

We have changed the way the withText method behaves when it is called in a chain.

const el = Selector ( ' div ' ). withText ( ' This is ' ). withText ( ' my element ' );

In previous versions, this selector searched for a div with text my element because the second call to withText overrode the first one.

Now this code returns an element whose text contains both This is and my element as the second call compounds with the first one.

⚙ Plugin for testing React apps #

In this release cycle, we have created a plugin for testing React applications. This plugin allows you to select React components by their names.

import ReactSelector from ' testcafe-react-selector ' ; const TodoList = ReactSelector ( ' TodoApp TodoList ' ); const itemsCountStatus = ReactSelector ( ' TodoApp div ' ); const itemsCount = ReactSelector ( ' TodoApp div span ' );

And it enables you to get React component's state and props .

import ReactSelector from ' testcafe-react-selector ' ; fixture `TODO list test` . page ( ' http://localhost:1337 ' ); test ( ' Check list item ' , async t => { const el = ReactSelector ( ' TodoList ' ); await t . expect ( el . getReact (). props . priority ). eql ( ' High ' ); await t . expect ( el . getReact (). state . isActive ). eql ( false ); });

To learn more, see the testcafe-react-selectors repository.

⚙ Plugin for testing Vue.js apps #

In addition to the React plugin, we have released a plugin that facilitates testing Vue.js applications.

In the same manner, it allows you to select Vue.js components with VueSelector selectors.

import VueSelector from ' testcafe-vue-selectors ' ; const rootVue = VueSelector (); const todoInput = VueSelector ( ' todo-input ' ); const todoItem = VueSelector ( ' todo-list todo-item ' );

These selectors allow you to get Vue component's props , state and computed properties.

import VueSelector from ' testcafe-vue-selector ' ; fixture `TODO list test` . page ( ' http://localhost:1337 ' ); test ( ' Check list item ' , async t => { const todoItem = VueSelector ( ' todo-item ' ); await t . expect ( todoItem . getVue (). props . priority ). eql ( ' High ' ) . expect ( todoItem . getVue (). state . isActive ). eql ( false ) . expect ( todoItem . getVue (). computed . text ). eql ( ' Item 1 ' ); });

To learn more, see the testcafe-vue-selectors repository.

We have created a Docker image with TestCafe, Chromium and Firefox preinstalled.

You no longer need to manually install browsers or the testing framework on your server. Pull the Docker image from the repository and run TestCafe immediately.

docker pull testcafe/testcafe docker run -v //user/tests:/tests -it testcafe/testcafe firefox tests/ ** / * .js

To learn more, see Using TestCafe Docker Image

⚙ Support for Internet access proxies (#1206) #

If your local network uses a proxy server to access the Internet, TestCafe can use it reach the external webpages.

To specify the proxy server, use a command line option

testcafe chrome my-tests/ ** / * .js --proxy 172.0.10.10:8080

or a method in the API.

runner . useProxy ( ' username:password@proxy.mycorp.com ' );

Note that you can pass the credentials with the proxy server host.

As an alternative to calling the t.debug method in test code, you can now specify the --debug-mode command line option to pause the test before the first action or assertion. When the test is paused, you can debug in the browser developer tools as well as continue test execution step by step.

testcafe chrome my-tests/ ** / * .js --debug-mode

If you use TestCafe API, provide the debugMode option to the runner.run method.

runner . run ({ debugMode : true });

⚙ Filtering selector's matched set by attribute (#1346) #

You can now use the withAttribute method to select elements that have a particular attribute set to a specific value. You can omit the attribute value to select elements that simply have the specified attribute.

const el = Selector ( ' div ' ). withAttribute ( ' attributeName ' , ' value ' ). nth ( 2 );

⚙ hasAttribute method added to DOM node state (#1045) #

For you convenience, the DOM node state object now provides the hasAttribute method that allows you to determine if an element has a particular attribute.

const el = Selector ( ' div.button ' ); t . expect ( el . hasAttribute ( ' disabled ' )). ok ();

⚙ Redirection when switching between roles (#1339) #

User roles now provide a preserveUrl option that allows you to save the webpage URL to which the browser was redirected after logging in. If you enable this option when creating a role, the browser will be redirected to the saved URL every time you switch to this role.

const regularUser = Role ( url , async t => { /* authentication code */ }, { preserveUrl : true })