« Changelog History


TestCafe v0.18.0 Release Notes

Release Date: 2017-10-10 // over 6 years ago

  • ✨ Enhancements

    ✅ :gear: Testing in headless Firefox

    ✅ We have added support for headless testing in Firefox (version 56+) and Chrome.

    testcafe firefox:headless tests/sample-fixture.js

    runner
    .src('tests/sample-fixture.js')
    .browsers('firefox:headless')
    .run()
    .then(failedCount => {
        // ...
    });

    ✅ :gear: Outputting test results to multiple channels (#1412)

    ✅ You can now print a report in the console and saved it to a .json file by specifying multiple reporters when running tests.

    testcafe all tests/sample-fixture.js -r spec,json:report.json

    const stream = fs.createWriteStream('report.json');

runner
    .src('tests/sample-fixture.js')
    .browsers('chrome')
    .reporter('spec')
    .reporter('json', stream)
    .run()
    .then(failedCount => {
        stream.end();
    });

    ✅ :gear: Entering the debug mode when a test fails (#1608)

    ✅ TestCafe can now automatically switch to the debug mode when a test fails. Test execution is paused so that you can explore the tested page to determine the failure's cause.

    💻 To enable this behavior, use the --debug-on-fail flag in the command line or the debugOnFail option in the API.

    testcafe chrome tests/fixture.js --debug-on-fail

    runner.run({ debugOnFail: true });

    ✅ :gear: Interacting with the tested page in debug mode (#1848)

    When debugging your tests, you can now interact with the tested page. Click the Unlock page button in the page footer to enable interaction.

    📄 [Unlock page button](docs/articles/images/unlock-page-button.png)

    Click Resume to continue running the test or click Next Step to skip to the next step.

    ✅ :gear: Chrome and Firefox are opened with clean profiles by default (#1623)

    ✅ TestCafe now opens Chrome and Firefox with empty profiles to eliminate profile settings' and extensions' influence on tests.

    However, you can return to the previous behavior using the :userProfile browser option.

    testcafe firefox:userProfile tests/test.js

    runner
    .src('tests/fixture1.js')
    .browsers('firefox:userProfile')
    .run();

    ✅ :gear: Customizable timeout to wait for the window.load event (#1645)

    💅 Previously, TestCafe started a test when the DOMContentLoaded event was raised. However, there are many pages that execute initialization code on the window.load event (which is raised after DOMContentLoaded because it waits for all stylesheets, images and subframes to load). In this case, you need to wait for the window.load event to fire before running tests.

    🚀 With this release, TestCafe waits 3 seconds for the window.load event. We have also added a pageLoadTimeout setting that allows you to customize this interval. You can set it to 0 to skip waiting for window.load.

    💻 The following examples show how to use the pageLoadTimeout setting from the command line and API:

    testcafe chrome test.js --page-load-timeout 0

    runner.run({
    pageLoadTimeout: 0
});

    ✅ You can also use the setPageLoadTimeout method in the test API to set the timeout for an individual test.

    fixture `Page load timeout`
    .page `http://devexpress.github.io/testcafe/example/`;

test(`Page load timeout`, async t => {
    await t
        .setPageLoadTimeout(0)
        .navigateTo('http://devexpress.github.io/testcafe/');
});

    ✅ :gear: Access messages output by the tested app to the browser console (#1738)

    ✅ You can now obtain messages that the tested app outputs to the browser console. This is useful if your application or the framework it uses posts errors, warnings or other informative messages to the console.

    💻 Use the t.getBrowserConsoleMessages method that returns the following object:

    {
    error: ["Cannot access the 'db' database. Wrong credentials.", '...'], // error messages
    warn: ['The setTimeout property is deprecated', '...'],                // warning messages
    log: ['[09:12:08] Logged in', '[09:25:43] Changes saved', '...'],      // log messages
    info: ['The application was updated since your last visit.', '...']    // info messages
}

    💻 Note that this method returns only messages posted via the console.error, console.warn, console.log and console.info methods. Messages the browser outputs (like when an unhandled exception occurs on the page) are not returned.

    📄 For instance, you can use React's typechecking feature, PropTypes, to check that you assigned valid values to the component's props. If a PropTypes rule is violated, React posts an error to the JavaScript console.

    💻 The following example shows how to check the React prop types for errors using the t.getBrowserConsoleMessages method:

    // check-prop-types.js
import { t } from 'testcafe';

export default async function () {
    const { error } = await t.getBrowserConsoleMessages();

    await t.expect(error[0]).notOk();
}

// test.js
import { Selector } from 'testcafe';
import checkPropTypes from './check-prop-types';

fixture `react example`
    .page `http://localhost:8080/`  // https://github.com/mzabriskie/react-example
    .afterEach(() => checkPropTypes());

test('test', async t => {
    await t
        .typeText(Selector('.form-control'), 'devexpress')
        .click(Selector('button').withText('Go'))
        .click(Selector('h4').withText('Organizations'));
});

    ✅ :gear: Defining drag end point on the destination element (#982)

    The t.dragToElement action can now drop a dragged element at any point inside the destination element. You can specify the target point using the destinationOffsetX and destinationOffsetY options.

    import { Selector } from 'testcafe';

const fileIcon      = Selector('.file-icon');
const directoryPane = Selector('.directory');

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

test('My Test', async t => {
    await t
        .dragToElement(fileIcon, directoryPane, {
            offsetX: 10,
            offsetY: 10,
            destinationOffsetX: 100,
            destinationOffsetY: 50,
            modifiers: {
                shift: true
            }
        });
});

    ✅ :gear: TestCafe exits gracefully when the process is interrupted (#1378)

    ✅ Previously, TestCafe left browsers open when you exited the process by pressing Ctrl+C in the terminal. ✅ Now TestCafe exits gracefully closing all browsers opened for testing.

    🐛 Bug Fixes

    • ✅ Tests no longer hang in Nightmare (#1493)
    • ✅ The focus event is raised when clicking links with tabIndex="0" (#1803)
    • ✅ Headless Chrome processes no longer hang after test runs (#1826)
    • ✅ setFilesToUpload no longer throws a RangeError on websites that use Angular (#1731)
    • 🛠 Fixed a bug where an iframe got a wrong origin (#1753)
    • ✅ document.open does not throw an error if document.defaultView is null (testcafe-hammerhead/#1272)
    • ✅ No error is thrown when the handler passed to addEventListener is undefined (testcafe-hammerhead/#1251)
    • ✅ An error is no longer raised if the processed element is not extendible (testcafe-hammerhead/#1300)
    • 🛠 Fixed a bug where an onclick handler did not work after click on a Submit button (testcafe-hammerhead/#1291)
    • 💅 Images with style = background-image: url("img.png"); are loaded correctly (testcafe-hammerhead/#1212)
    • ✅ Documents can contain two ShadowUI roots (testcafe-hammerhead/#1246)
    • ✅ HTML in an overridden document.write function is processed correctly (testcafe-hammerhead/#1311)
    • ✅ Elements processing works for a documentFragment as it is added to the DOM (testcafe-hammerhead/#1334)