TestCafe: упрощенное комплексное тестирование веб-приложений с Node.js

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

Затем добавьте тест:

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

test('My first test', async t => {
    // We will add test code later
});

Теперь введите текст нашего теста в поле Имя разработчика и нажмите кнопку «Отправить»:

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

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});

Здесь мы использовали typeText и нажимаем тестовые действия. TestCafe предоставляет дюжину из них, от наведения до загрузки файла .

Давайте вернемся к нашему тесту. Кнопка «Отправить» перенаправляет вас на страницу с надписью «Спасибо,% username%!».

Мы проверим, что текст на этой странице содержит правильное имя:

 import { Selector } from 'testcafe';

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

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Для этого мы создаем селектор, который идентифицирует заголовок статьи. После тестовых действий мы добавляем утверждение, которое проверяет, говорит ли текст «Спасибо, Питер Паркер!»

Объект страницы

Команда TestCafe рекомендует использовать шаблон Page Object в тестах. С помощью этого шаблона вы вводите объектное представление тестируемой страницы и используете его в тестовом коде. Давайте посмотрим, как мы это делаем.

Создайте новый файл page-object.js

 export default class Page {
    constructor () {
    }
}

Пока наш тест взаимодействует с тремя элементами страницы: ввод имени разработчика, кнопка «Отправить» и заголовок «Спасибо». Итак, мы добавляем три селектора в класс Page:

 import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

В тестовом файле укажите ссылку на page-object.js

 import Page from './page-object';

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

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Используя шаблон объекта страницы, вы сохраняете все селекторы в одном месте. Когда тестируемая веб-страница изменится, вам нужно будет обновить только один файл — page-object.js

Выполнение тестов локально

Чтобы запустить этот тест на локальном компьютере, вам нужна только одна команда:

 testcafe chrome test.js

 npm install --save-dev testcafe-browser-provider-saucelabs

 npm install --save-dev testcafe

 testcafe "saucelabs:Chrome@beta:Windows 10" test.js

 testcafe -b saucelabs

 npm install -g gulp
npm install --save-dev gulp

 npm install --save-dev gulp-testcafe

 const gulp     = require('gulp');
const testcafe = require('gulp-testcafe');

gulp.task('run-testcafe-tests', () => {
    return gulp
        .src('test.js')
        .pipe(testcafe({ browsers: ['chrome', 'firefox'] }));
});

 gulp run-testcafe-tests