VasilyStrelyaev

fixture `My fixture`
    .page `http://example.com`
    .httpAuth({
        username: 'username',
        password: 'Pa$$word',

        // Optional parameters, can be required for the NTLM authentication.
        domain:      'CORP-DOMAIN',
        workstation: 'machine-win10'
    });

VasilyStrelyaev

import { HomePage } from './page-object';
import { johnSmith, aliceBrown } from './roles'

fixture `GitHub Tests`
    .page `https://github.com`;

const page = new HomePage();

test('User name is displayed correctly', async t => {
    await t

VasilyStrelyaev

import { Selector } from 'testcafe';

export class LoginPage {
    constructor () {
        this.login    = Selector('#login_field');
        this.password = Selector('#password');
        this.signIn   = Selector('.btn').filter(node => node.value === 'Sign in');
    }
}

VasilyStrelyaev

import { Role } from 'testcafe';
import { LoginPage } from './page-object';

const page         = new LoginPage();
const loginPageUrl = 'https://github.com/login';

export const johnSmith = Role(loginPageUrl, async t => {
    await t
        // To try the test in action, provide real credentials.
        .typeText(page.login, 'johnsmith')

VasilyStrelyaev

import { Selector } from 'testcafe';

export class LoginPage {
    constructor () {
        this.login    = Selector('#login_field');
        this.password = Selector('#password');
        this.signIn   = Selector('.btn').withAttribute('value', 'Sign in');
    }
}

VasilyStrelyaev

import { Selector } from 'testcafe';

const rows          = Selector('.row');
const removeButton  = Selector('.remove-row');

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

test('Test that involves two users', async t => {
    await t

VasilyStrelyaev

import { Role } from 'testcafe';

const loginPageUrl = 'http://example.com/login';

const regularUser = Role(loginPageUrl, async t => {
    await t
        .typeText('#login', 'TestUser')
        .typeText('#password', 'testpass')
        .click('#sign-in');
});

VasilyStrelyaev

import { Selector } from 'testcafe';

const rows          = Selector('.row');
const removeButton  = Selector('.remove-row');
const signInButton  = Selector('#sign-in');
const signOutButton = Selector('#sign-out');
const loginInput    = Selector('#login');
const passwordInput = Selector('#password');

fixture `My Fixture`

VasilyStrelyaev

Setting Up End-to-End Testing for your Web App with TestCafe

Front-end web developers know how difficult it is to set up automated testing for a web app.

Even installing a testing framework can be challenging. Many existing solutions require Selenium, which brings browser plugins and JDK with it.

Before you start testing, you also need to set up a test harness, which means dealing with configuration files. Later, you can discover that some parts of the harness – such as reporting – are missing and you need to find and install them separately.

VasilyStrelyaev

import { Selector } from 'testcafe';

const label = Selector('label');

class Feature {
    constructor (text) {
        this.label    = label.withText(text);
        this.checkbox = this.label.find('input[type=checkbox]');
    }
}