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 for Node.js, using TestCaféusing TestCafé.

TestCafé is a Node.js utility for E2E testing that does not use Selenium WebDriver; it uses a proxy mechanism instead. Some of its features include the ability to handle automatically the wait times of page loads/XHR requests for stabler tests.

Besides being easy to setup, it runs in multiple OSes and supports almost, if not all, browsers out there. It supports desktop, mobile, remote, cloud and parallel testing.

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

Requirements

TestCafé
"testcafe-reporter-xunit" module 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.

Simple message validation after submission of input

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

Hardcoded selectors, directly in the test code, are used to implement the test.

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.

No Format
testcafe chrome test1.js test2.js --reporter xunit > results.xml

It is also possible to perform headless testing (e.g. use "chrome:headless" as the browser name, for example).

No Format
testcafe "chrome:headless" test1.js test2.js --reporter xunit > results.xml

To run them in the cloud using BrowserStack, the command line would be something like this (BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY environment variables would need to be defined beforehand):

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

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

After running the tests and generating the JUnit XML reports (e.g., results.xml), they can be imported to Xray (either by the REST API or through the Import Execution Results action within the Test Execution).

Image RemovedImage Added

JUnit's Test Case is mapped to a Generic Test in Jira, and the Generic Test Definition field contains the value of the "it" concatenated with the several "describe"' that make up the test case.

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

Image Modified

Content

Space Tools