Сквозное тестирование с Testcafe

Сквозное тестирование не обязательно должно быть экстремальным занятием. Прежде чем писать сквозные тесты, нам нужно настроить W3C WebDriver API (ранее Selenium WebDriver) и использовать тестовую среду, такую как Nightwatch, которая была построена с помощью NodeJS. Хотя это может быть удивительно, настройка W3C WebDriver API может быть сложной, потому что нам нужно настроить Java SDk на нашем компьютере, после чего вам нужно настроить Nightwatch, используя файл JSON, полный предустановок (от предустановок селена до предустановок браузера и т. д.). Из-за скорости, с которой меняется Javascript, вам также необходимо настроить Nightwatch, чтобы иметь возможность использовать ES6 и более поздние версии. После всего этого нужно добавить файл nightwatch.conf.js в корень проекта. Хотя может быть и другой подход к настройке всего, что я изложил выше, но, на мой взгляд, это самый простой подход.

В последнее время появился лучший способ написания сквозных тестов для вашего приложения, лучшие фреймворки с более простыми настройками. В этом уроке я покажу вам, как писать сквозные тесты с помощью TestCafe, чтобы добиться этого от простой настройки до написания наборов тестов с базовыми утверждениями, углубитесь, это будет весело.

Настройка тестового кафе.

Для целей этого урока я буду использовать небольшое приложение, которое я недавно создал, которое генерирует случайные телефонные номера, это приложение размещено здесь (

Сначала нам нужно установить testcafe глобально, запустив в вашем терминале
$ npm install -g testcafe
Если вы предпочитаете не устанавливать Testcafe глобально на свой компьютер, альтернативный подход — установить его как зависимость в вашем проекте, запустив

$ npm install testcafe —save-dev

Ссылку на репозиторий проекта можно найти здесь. Исходный код перед тестами можно найти в ветке разработки, я создал тестовую ветку, где мы можем найти коды набора тестов. Вот и настал момент, которого мы ждали.

Написание тестовых наборов для нашего проекта

Сначала мы создаем каталог, в котором будут храниться наши тестовые файлы, назовем его e2e, затем мы создаем файл app.test.js в нашем каталоге e2e.

Следующее, что нужно сделать, это импортировать модуль testcafe, как указано в документации, импортируя testcafe следующим образом.
import { Selector } from ‘testcafe’;

Чтобы сделать наши тесты чище и читабельнее, нам нужно создать «фикстуру». Фикстура — это, по сути, категория тестов, набор тестов может содержать один или несколько фикстур. Создадим наше приспособление

fixture `Random Number Generator tests`
  .page `

Что, если у нас будет гораздо более длинный URL-адрес, это может сделать наш код менее читаемым, потому что он будет содержать более 100 символов в строке, поэтому давайте очистим это и создадим константу для хранения значения нашего URL-адреса за одну или две строки до нашей фиксации, назовем константу происхождения.
const origin = “

Это заставит наше новое приспособление выглядеть так

fixture `Random Number Generator tests`
  .page `${origin}`

Давайте приступим к созданию нашего первого набора тестов, который утверждает URL-адрес домашней страницы нашего приложения.

test(‘test homepage URL’, async t => {
  await t.expect(); // this is an assertion to check if the URL of our page is the same as what we are expecting
});

Прежде чем мы утвердим наш URL, я хотел бы представить вам кое-что еще, Клиентские функции в тесткафе. Клиентские функции предназначены для создания пользовательских функций для целей тестирования, и в этом случае нам нужно использовать их, чтобы получить расположение нашего окна, но прежде чем мы это сделаем, давайте импортируем их. Отредактируйте строку 1 так

import { Selector, ClientFuntion } from ‘testcafe’;

Давайте приступим к созданию клиентской функции чуть ниже нашей исходной константы, например:

const getUrl   = ClientFuntion(() => document.location.href);

Как только это будет сделано, мы можем выполнить наше первое утверждение, наш первый набор тестов теперь будет выглядеть так:

test('Test homepage URL', async t => {
  await t.expect(getUrl()).match(/https:\/\/moh-random-number-generator.herokuapp.com/);
});

Запускаем наши тесты

В Testcafe есть много необязательных параметров для запуска тестов, но я пока буду придерживаться самого простого, в нашем файле package.json я добавлю новый скрипт, подобный этому
"test:e2e": "testcafe chrome e2e/app.test.js -e -q --debug-on-fail"

Я решил использовать хром в качестве своего тестового браузера, другие доступные варианты — Firefox и Safari, вместо использования Chrome я могу использовать все браузеры, используя флаг «все» вместо Chrome; флаг -e останавливает выполнение теста при возникновении сбоя и предоставляет трассировку стека; Флаг -q включает режим карантина при сбое теста, и, наконец, —debug-on-fail автоматически переходит в режим отладки при сбое теста.

Написание дополнительных тестов и утверждений

Напишем больше тестов и утверждений

test('test page banner', async t => {
// assertion to check if the only h1 tag on the page contains the required text
  await t.expect(Selector('h1').innerText).contains('Phone Number Generator');
});


test('test page banner', async t => {
// assertion using the class attribute instead of the tag name is also possible
  await t.expect(Selector('.App-subtitle').innerText).contains('How many numbers do you want to generate?');
});

test('test app button', async t => {
  await t.expect(Selector('button').innerText).contains('Generate Phone Number(s)');
});

test('test generate phone number functionality', async t => {
  await t
    .click(Selector('input').withAttribute('placeholder', 'Enter a number'))
    .typeText(Selector('input').withAttribute('placeholder', 'Enter a number'), '3', { replace: true })
    .click(Selector('button').withText('Generate Phone Number(s)'))
    .wait(5000); // So we can see that the numbers where generated

  // Test sorting functionality
  await t
    .click(Selector('select'))
    .click(Selector('option').withText('Ascending'))
    .wait(1000);

  // Test export button functionality
  await t
    .click(Selector('button').withText('Export Numbers'))
    .expect(getUrl()).match(/https:\/\/moh-random-number-generator.herokuapp.com/)
});

Вывод

Это лишь малая часть того, чего можно достичь с помощью TestCafe, если у вас есть дополнительные вопросы, пожалуйста, прокомментируйте, я отвечу на все, что смогу. Для получения дополнительной информации хорошо написана документация TestCafe, ее можно найти здесь.

Не стесняйтесь клонировать репозиторий и экспериментировать, добавляя дополнительные наборы тестов. Обратите внимание, что, поскольку приложение размещено на героку, динамометр может спать, когда вы пытаетесь запустить тесты, пожалуйста, загрузите приложение в браузере, чтобы разбудить его перед запуском тестов. .

Пожалуйста, оставьте любые вопросы, которые у вас есть, в разделе комментариев, я буду готов помочь.