TestCafe v0.15.0 release notes

« Changelog History

TestCafe v0.15.0 Release Notes

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

💥 Breaking Changes

🆕 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.

✨ Enhancements

✅ :gear: 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.

✅ :gear: 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.

🐳 :gear: TestCafe Docker image (#1141)

🐳 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

✅ :gear: 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:[email protected]');
```
Note that you can pass the credentials with the proxy server host.

✅ :gear: Debugging mode option (#1347)

📚 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 });
```
✅ :gear: Filtering selector's matching 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);
```
✅ :gear: 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();
```
✅ :gear: 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 })
```
🐛 Bug Fixes
- 🛠 Fixed a bug where incorrect call site and callstack were generated for an assertion that failed in a class method (#1267)
- ✅ Incorrect validation result no longer appears when a test controller is used inside an async function (#1285)
- ✅ Click on the status panel no longer affects the page state (#1389)
- ✅ The input event is now raised with a correct selection value when input value was changed (#1388)
- ✅ Inline source maps are now placed in transpiled files so that breakpoints work correctly (#1375)
- ✅ value and selectedIndex in the input event handler for the dropdown element are now valid (#1366)
- ✅ A presskey('enter') call now raises the click event on a button element (#1424)
- ✅ The cursor position in Monaco editor is now set correctly on the click action (#1385)
- ✅ hasScroll now works correctly if the body has absolute positioning (#1353)
- ✅ Text can now be typed into HTML5 input elements (#1327)
- ✅ focusin and focusout events are now raised when the browser window is in the background (testcafe-hammerhead/#1044)
- ✅ caretPositionFromPoint and caretRangeFromPoint now ignore TestCafe UI elements on the page (testcafe-hammerhead/#1084)
- ✅ Images created with the Image constructor are now loaded through the proxy (testcafe-hammerhead/#1087)
- 💅 The innerText return value is now clear of script and style code (testcafe-hammerhead/#1079)
- ✅ Non-string values for element's text properties are now converted to String (testcafe-hammerhead/#1091)
- ✅ SVG elements are now processed correctly in IE (testcafe-hammerhead/#1083)