Testcafe

What is it

• node.js tool to automate e2e testing

• tests can be written in JS and Typescript

• no webdriver is needed

Browsers support

Most of modern browsers locally installed can be detected: Google Chrome (Stable, Beta, Dev and Canary), Internet Explorer (11+), Microsoft Edge, Mozilla Firefox, Safari, Android browser, Safari mobile.

If these browsers are locally installed then TestCafe will detect it.

Run testcafe --list-browsers to list which browsers TestCafe automatically detects.

Installation

yarn add --dev testcafe

How does it work

TestCafe uses a proxy server, it injects scripts in the page then we can inspect the elements.

Each test receives a test controller as a parameter. The test controller is an object that allows us to access the test api. We’ll use it for actions and assertions.

How to run a test

testcafe chrome test.js

Live mode

testcafe chrome e2e/**/* -L

Code structure

Test code simple structure

fixture `Getting Started`
 .page `https://blog.xebia.fr`;
test('My first test', async t => {
 // Test code
});

Page object pattern

Capabilities

Selector

Selector is a function that identifies a webpage element in the test. The selector API provides methods and properties to select elements on the page and get their state. TestCafe uses standard CSS selectors to locate elements. It’s like when you use document.querySelector in JS (learn more by reading the documentation).

Actions

Test API provides a set of actions that enable you to interact with the webpage. Actions are implemented as methods in the test controller object and can be chained.

Observing page state

TestCafe allows you to observe the page state via:

• Selector used to get direct access to DOM elements

• ClientFunction used to obtain arbitrary data from the client side.

Assertions

The test controller provides an expect function that should check the result of performed actions.

Hooks

• fixture.beforeEach( fn(t) )

• fixture.afterEach( fn(t) )

• test.before( fn(t) )

• test.after( fn(t) )

fixture`Navigation`
  .page`http://localhost:3000`
  .beforeEach( async t => {
    await t.click(homePage.startBtn);
    await postsPage.isPageDisplayed();
  });

Debugging

The debug method of TestController

async submitForm(title, content) {
  await t
    .typeText(this.inputTitle, title)
    .debug() // the test stops here
    .typeText(this.textAreaField, content)
    .click(this.submitBtn);
}

Debugging with screenshots on failure

testcafe chrome e2e/**/* --screenshots ./screenshots --screenshots-on-fails

Debugging with videos

testcafe chrome e2e/**/* --video videos --video-options singleFile=true,failedOnly=true