v0.16.0-alpha1

Fix regression test on Safari 10.1; Update hammerhead (#1474)

v0.15.0

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

⚙️ 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.

⚙️ 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

⚙️ 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.

⚙️ 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 });

⚙️ 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);

⚙️ 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 })

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)

v0.15.0-alpha4

Update hammerhead. Bump alpha version (#1443)

v0.15.0-alpha3

Bump version (alpha) (#1433)

v0.15.0-alpha2

Bump version (alpha) (#1419)

v0.15.0-alpha1

Use [email protected] (#1367)

v0.14.0

Enhancements

⚙ Authentication via user roles (#243)

Many test scenarios involve the activity of more than one user. TestCafe addresses these scenarios by providing a convenient way
to isolate authentication test actions and apply them easily whenever you need to switch the user account.

A piece of logic that logs in a particular user is called a role. It is a good practice to create a role for each user account participating in your test.

Create roles via the Role constructor. You can keep them in a separate helper file.

helper.js

import { Role } from 'testcafe';

export var regularAccUser = Role('http://example.com/login', async t => {
    await t
        .typeText('#login', 'TestUser')
        .typeText('#password', 'testpass')
        .click('#sign-in');
});

export var facebookAccUser = Role('http://example.com/login', async t => {
    await t
        .click('#sign-in-with-facebook')
        .typeText('#email', '[email protected]')
        .typeText('#pass', 'testpass')
        .click('#submit');
});

export var admin = Role('http://example.com/login', async t => {
    await t
        .typeText('#login', 'Admin')
        .typeText('#password', 'adminpass')
        .click('#sign-in');
});

In test code, use the t.useRole method to switch between roles.

test.js

import { regularAccUser, admin } from './helper';
import { Selector } from 'testcafe';

const entry        = Selector('#entry');
const removeButton = Selector('#remove-entry');

fixture `My Fixture`
    .page `http://example.com`;

test('test that involves two users', async t => {
    await t
        .useRole(regularAccUser)
        .expect(entry.exists).ok()
        .expect(removeButton.visible).notOk()
        .useRole(admin)
        .expect(removeButton.visible).ok()
        .click(removeButton)
        .expect(entry.exists).notOk()
});

To learn more, see User Roles.

⚙ BrowserStack support

We have released the BrowserStack browser provider plugin.

Install this plugin from npm.

npm install testcafe-browser-provider-browserstack

And save the BrowserStack username and access key to environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY.

Now you can run tests on any virtual machine available on BrowserStack.

testcafe "browserstack:[email protected]:Windows 10" "path/to/test/file.js"

⚙ Client-side debugging (#918)

We have added a new t.debug method to debug test behavior on the client.

When test execution reaches t.debug, it pauses so that you can open browser's developer tools
and check the web page state, DOM elements location, their CSS styles.

fixture `My fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My test', async t => {
    await t
        .debug()
        .setNativeDialogHandler(() => true)
        .click('#populate')
        .click('#submit-button');
});

In the footer, you'll find buttons that allow you to continue test execution or step to the next test action.

TestCafe logs points in code where the debugger stopped.

⚙ Testing local webpages (#1286)

You can now run tests against local webpages. To do this, specify a URL with the file:// scheme or a relative path when calling the page function.

fixture `MyFixture`
    .page `file:///user/my-website/index.html`;

fixture `MyFixture`
    .page `../my-project/index.html`;

You can also navigate to local pages with the t.navigateTo action.

fixture `My fixture`
    .page `http://www.example.com/`;

test('Navigate to local pages', async t => {
    await t
        .navigateTo('file:///user/my-website/index.html')
        .navigateTo('../my-project/index.html');
});

⚙ Adding custom methods to the selector (#1212)

You can now extend selectors with custom methods executed on the client. Use the addCustomMethods method to provide custom methods.

const myTable = Selector('.my-table').addCustomMethods({
    getCellText: (table, rowIndex, columnIndex) =>
        table.rows[rowIndex].cells[columnIndex].innerText
});

await t.expect(myTable.getCellText(1, 1)).contains('hey!');

Use this feature to build selectors that reflect the specifics of your web app.

⚙ Removing the native dialog handler (#243)

We have added the capability to remove a native dialog handler by passing null to the t.setNativeDialogHandler method.

fixture `My fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My test', async t => {
    await t
        .setNativeDialogHandler(() => true)
        .click('#populate')
        .setNativeDialogHandler(null)
        .click('#submit-button');
});

Bug Fixes

• Fixed a bug that led to an incorrect callstack in test run report (#1226)
• Cursor is now hidden on screenshots created using the t.takeScreenshot action (#1245)
• Error no longer appears when selecting a non-existent child by index (#1240)
• The blur event is now raised on time when an input is hidden in IE (#1275)
• TestCafe no longer fails if a client function argument contains ES6 class method syntax (#1279)
• TestCafe now reports errors that occur during browser provider initialization (#1282)
• Click on the debugger panel no longer affects the tested page (#1200)
• An unhandled error no longer occurs when running a fixture without tests (#1302)
• The input event is now raised when the value of a select element is changed (#1311)
• You can now perform actions with ShadowDOM elements (#1312)
• Server no longer responds with status 222 when window.fetch() is called in Chrome (#1134)
• The JSON reporter no longer returns screenshotPath: null if a screenshot path is not specified (#1269)
• The navigateTo action no longer fails silently with schemes like http*string*:// (#965)
• The SVG use tag is no longer broken when the parent page has a file:// URL (testcafe-hammerhead/#1051)
• Fixed a bug where toString was used instead of instanceToString from DOM utils (testcafe-hammerhead/#1055)
• File download is no longer raised if the resource is fetched by setting the script src (testcafe-hammerhead/#1062)
• Fixed wrong CORS emulation for fetch requests (testcafe-hammerhead/#1059)
• Navigator.sendBeacon function is now overridden (testcafe-hammerhead/#1035)

0.14.0-alpha6

Bump version (#1354)

0.14.0-alpha5

Bump version (#1348)

v0.14.0-alpha4

Fix linter error (#1334)

* Fix linter error

* Fix webmake