Page History

Versions Compared

Key

This line was added.
This line was removed.
Formatting was changed.

Overview

In this tutorial, we will create some E2E tests in JavaScript using TestCafé.

...

You may also use an IDE (TestCafé Studio) to easily record, implement and playback tests.

TestCafé is not just an automation library; it's a complete testing tool that provides assertions and a runner, to implement and run the tests.

Requirements

TestCafé
testcafe-reporter-xunit module
testcafe-browser-provider-saucelabs module (if using Sauce Labs)
testcafe-browser-provider-browserstack module (if using BrowserStack)

Description

The following examples are taken from TestCafé's documentation; the first one implements a test in a very simple way although hard to maintain in the long run.

In the second example, two tests are built using the page object pattern.

In TestCafé terminology, a fixture is essentialy a group of tests. A Javascript/TypeScript file may contain one or more fixtures and associated to each one there can be multiple tests.

Simple message validation after submission of input

In this test, an input box is filled out and submitted. Afterwards, the submission message is evaluated.

...

Code Block

language	js
title	test1.js	collapse	true

import { Selector } from 'testcafe'; // first import testcafe selectors

fixture `Getting Started`// declare the fixture
    .page `https://devexpress.github.io/testcafe/example`;  // specify the start page


//then create a test and place your code there
test('My first test', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button')

        // Use the assertion to check if the actual header text is equal to the expected one
        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');
});

Implementing tests using page object pattern

In this scenario, taken from TestCafé's documentation, we start by defining a page object.

...

Code Block

language	js
title	test2.js	collapse	true

import Page from './page-model';

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

const page = new Page();

test('Text typing basics', async t => {
    await t
        .typeText(page.nameInput, 'Peter')
        .typeText(page.nameInput, 'Paker', { replace: true })
        .typeText(page.nameInput, 'r', { caretPos: 2 })
        .expect(page.nameInput.value).eql('Parker');
});

test('Click check boxes and then verify their state', async t => {
    for (const feature of page.featureList) {
        await t
            .click(feature.label)
            .expect(feature.checkbox.checked).ok();
    }
});

Running the tests

In this example, we'll run the tests locally using Chrome browser.

...

To run them in the cloud using BrowserStackSauce Labs, the command line would be something like this (BROWSERSTACKSAUCE_USERNAME and BROWSERSTACKand SAUCE_ACCESS_KEY environment variables would need to be defined beforehand):

No Format
testcafe "browserstacksaucelabs:Chrome@66.0:Windows 10" test1.js test2.js --reporter xunit > results.xml

...

The Execution Details of the Generic Test contains information about the Test Suite, which in this case corresponds to the concatenation of the test's "describe".

References

...

Content

Space Tools