ПРЕДУПРЕЖДЕНИЕ
Это будет пост. Итак, возьмите чашку кофе/чая и повесительны!
Вступление
Что такое E2E?
Тестирование сквозного (E2E)-это метод, используемый для тестирования всего потока, как если бы мы были фактическим пользователем, моделируя их действия (щелчки, нажимая определенные ключи, ввод в поле и т. Д.).
Это вполне полезно для тестеров, поскольку по мере того, как проект увеличивает количество сценариев для тестирования, также увеличивается, и если люди выполняют всю эту работу, может привести к тому, что они упускают из виду/отсутствуют вещи из -за отвлечения или усталости.
Кроме того, эти тесты могут быть настроены для запуска на Непрерывная интеграция (CI) Система, которая может выполнять все тесты каждые время x времени или после развертывания. Но это тема для другой статьи:)
Что такое TestCafe?
Testcafe является инструментом для тестирования E2E, основанного на Nodejs, который довольно прост в настройке и использовании, который поддерживает как JavaScript, так и TypeScript.
Требования
Установите Nodejs
Это можно сделать через их Веб -сайт или через командную строку терминала вашей операционной системы (шаги будут разными в зависимости от вашей ОС).
После этого, чтобы убедиться, что ваши Nodejs были успешно установлены, запустите следующую команду в вашей терминале/командной строке:
npm -v
Вы должны увидеть номер версии, мой 5.6.0 Как я пишу этот пост.
Установите TestCafe
Теперь, когда у нас есть npm Установлено, запустите следующую команду (это может потребовать привилегий ROOT/ADMIN):
npm install -g Testcafe
Чтобы запустить это в качестве пользователя Root/Admin, выполните одну и ту же команду в MacOS или ОС на основе Linux, а также добавление Sudo В начале команды выше, и пользователи Windows должны Щелкните правой кнопкой мыши и выберите Бежать как администратор При открытии CMD или PowerShell Анкет
Если все прошло хорошо, вы сможете увидеть версию вашего модуля TestCafe, работая:
testcafe -v
Вывод должен сказать что -то вроде:
Using locally installed version of TestCafe. 0.18.6
Отличная работа! Мы почти готовы начать 👨💻/👩 💻.
Выберите свое оружие (IDE/редактор)
Я буду использовать Против кода Как мое оружие выбора + некоторые расширения (я покажу их позже, я также рад начать кодирование!), Но не стесняйтесь выбирать любой IDE/редактор, который вы предпочитаете.
Структура проекта
Наша первоначальная структура проекта будет выглядеть так:
project
|
└─── tests
│
└─── devto.js
Первый тест
Первое, что нам нужно сделать, это импорт класс под названием Селектор из testcafe модуль, как это:
import { Selector } from 'testcafe'
Тогда нам нужно создать приспособление , дайте ему имя и Страница URL, который будет использоваться в начале всех ваших тестов.
Вы увидите, где имя приспособление используется позже.
Теперь ваш код должен выглядеть как:
import { Selector } from 'testcafe'
fixture('DEV Tests')
.page('http://dev.to/');
Теперь, когда у нас есть это, давайте начнем писать код для наших тестов.
Для простоты это будут шаги, которые мы будем выполнять:
- Перейдите на Dev.to Home Page.
- Нажмите на ссылку ABA.
- Проверьте имя каждого основателя.
Вернемся к кодовой пещере!
Для этого нам нужно добавить тест Метод, который принимает два аргумента: a Строка Значение, которое будет названием теста, и Асинхронизация Функция стрелки, которая будет иметь логику внутри.
Что-то вроде:
test("Check founder's names", async (t) => {
// Brace yourself, the real magic goes here.
});
Почему мы используем Async?
Это позволит нам запустить наши тесты в параллель (Что потрясающе!) Позже. Но сейчас мы запустим наши тесты в одном браузере.
Где настоящая магия?
Почему мы импортировали класс селектора?
Что говорит лиса?
SSSSH … просто позвольте этому случиться.
Мы доберемся до этого:)
Первое, что нам нужно сделать, это получить The Link’s селектор .
A Селектор в основном способ определить элемент или группу элементов на странице.
Чтобы добиться этого, я буду использовать встроенные Devtools Chrome. Перейти к dev.to Домашняя страница, прокрутите вниз и Щелкните правой кнопкой мыши В дополнение к ссылке и выберите Осмотреть вариант.
Это откроет варианты Devtools, и вы хотите сосредоточиться на Элемент HTML выделен.
На панели Devtools, Щелкните правой кнопкой мыши на о ссылке и выберите Копировать> Селектор копирования Анкет Это скопирует Селектор ценность вашего буфера обмена.
Теперь вернитесь к своему редактору и храните эту ценность, как это:
const aboutLink = Selector('#sidebar-wrapper-left > div.side-bar > div.widget > div.side-footer > a:nth-child(1)');
Весь код должен выглядеть так сейчас:
import { Selector } from 'testcafe'
fixture('DEV Tests')
.page('http://dev.to/');
test("Check founder's names", async (t) => {
const aboutLink = Selector('#sidebar-wrapper-left > div.side-bar > div.widget > div.side-footer > a:nth-child(1)');
});
Но ждать!
Давайте воспринимаем это как шанс использовать другой заклинание Этот тестовый кафек дает нам … .withtext () метод
Мы можем написать тот же код, как это:
const aboutLink = Selector('a').withText('About');
.withtext () Метод принимает Строка аргумент и работает аналогично .Pontains () Метод, с которым вы можете быть знакомы. Он сравнит текстовое значение элемента с аргумент Вы входите и только возвращаетесь истинный Когда аргумент совпадает с любой частью данного текстового значения (примечание: оно чувствительно к случаям); В противном случае он вернется ложный Анкет
Чувствительный к случаю означает, что капитализация буквы отличает ее от другой, даже если они звучат одинаково. Пример: «тест» и «тест» считаются различными в этом случае.
Давайте отправимся на страницу «О том», чтобы найти другое селектор Значения нам нужно будет использовать.
Мы могли бы сделать это копия-паста Путь и повторите все шаги, которые мы сделали с Devtools, но мы знаем, что мы лучше, чем это (или мы думаем).
Итак, давайте сделаем это, как мы только что узнали. С силой withText () метод
Единственное отличие в том, что на этот раз наши Селектор не тег, это на самом деле ярлык. Вы можете проверить это, осмотрев каждое из имен основателя или просто доверяя моему слову (я бы не стал).
Наш код будет выглядеть примерно так:
const aboutLink = Selector('a').withText('About');
const firstFounder = Selector('b').withText('Ben Halpern');
const secondFounder = Selector('b').withText('Jesse Lee');
const thirdFounder = Selector('b').withText('Peter Frank');
Потрясающий!
Если мы посмотрим на все devto.js Файл, это должно быть:
import { Selector } from 'testcafe'
fixture('DEV Tests')
.page('http://dev.to/');
test("Check founder's names", async(t) => {
const aboutLink = Selector('a').withText('About');
const firstFounder = Selector('b').withText('Ben Halpern');
const secondFounder = Selector('b').withText('Jesse Lee');
const thirdFounder = Selector('b').withText('Peter Frank');
});
Теперь начнем использовать наших новых блестящих селекторов!
Вы забыли, что мы на самом деле собирались сделать в нашем тесте?
Да, я тоже. Но не волнуйтесь, я получил Fam! 😎
- Перейдите на Dev.to Home Page.
- Нажмите на ссылку ABA.
- Проверьте имя каждого основателя.
.страница () Метод уже охватывает первый шаг, поэтому мы можем отметить этот.
[x] Перейдите на Dev.to Home Page. [] Нажмите на ссылку ABA. [] Проверьте имя каждого основателя.
Чтобы нажать на «О ссылке», нам нужно будет добавить следующий код в конце нашего теста:
await t
.click(aboutLink);
После этого нам придется проверить, отображается ли каждый заголовок имени основателя на странице:
await t
.click(aboutLink)
.expect(firstFounder.exists).ok()
.expect(secondFounder.exists).ok()
.expect(thirdFounder.exists).ok();
Давайте сделаем шаг назад и убедимся, что все выглядит так в нашем devto.js :
import { Selector } from 'testcafe'
fixture('DEV Tests')
.page('http://dev.to/');
test("Check founder's names", async(t) => {
const aboutLink = Selector('a').withText('About');
const firstFounder = Selector('b').withText('Ben Halpern');
const secondFounder = Selector('b').withText('Jess Lee');
const thirdFounder = Selector('b').withText('Peter Frank');
await t
.click(aboutLink)
.expect(firstFounder.exists).ok()
.expect(secondFounder.exists).ok()
.expect(thirdFounder.exists).ok();
});
Ты еще там?
Ну, надеюсь, ты это сделаю. Потому что теперь наступает Веселье часть!
Запустить тест
Чтобы запустить тест, вам нужно будет пробиться в папку, где ваш devto.js расположен и запустите следующую команду:
testcafe Chrome devto.js
Примечание: вы можете заменить хром С вашим любимым браузером.
Теперь инопланетяне возьмут под контроль ваш компьютер и начнут делать сумасшедшие вещи … например, запуск вашего теста.
Если все прошло хорошо, вы должны увидеть что -то подобное в своей консоли:
Using locally installed version of TestCafe. Running tests in: - Chrome 63.0.3239 / Mac OS X 10.13.2 DEV Tests ✓ Check founder's names 1 passed (4s)
Буд!
Это было довольно много работы!
Но есть еще больше вкусностей.
- Используя несколько браузеров одновременно.
- Запуск тестов параллельно.
- Refactor наш код для использования шаблона проектирования модели объекта страницы.
Мы можем продолжить следующую часть:
E2E тестирование с помощью TestCafe | Парарелл исполнение
Кристиан Васкес ・ 15 января ’18 ・ 2 мин читал
Оригинал: “https://dev.to/chrisvasqm/e2e-testing-with-testcafe-17jl”