Если вы ищете или ищете, как выполнить сквозное (E2E) тестирование для своего приложения vue.js, то вы попали в нужное место!

Потерпите меня, в конце этого руководства вы узнаете, как выполнять E2E для Vue.js. В этом руководстве я буду использовать одну из известных библиотек Testcafe.

Если вы раньше не слышали о Testcafe, не волнуйтесь, я расскажу вам, как мы идем! или можете посмотреть здесь.

Прежде всего, нам нужно приложение Vue, я создал образец приложения для демонстрационных целей.

Клонировать этот репозиторий:

git clone https://github.com/Tech-49/E2E-Testcafe-Vue.git
cd E2E-Testcafe-Vue

После клонирования выполните следующие команды:

  1. npm install Чтобы установить зависимости
  2. npm run serveЧтобы запустить сервер разработки

По умолчанию ваше приложение должно работать на порту 8080. Зайдите в браузер и проверьте это - http: // localhost: 8080

Вы должны увидеть, что эти страницы работают:

Теперь, как человек, если я хочу протестировать эти страницы, то я буду переходить от страницы к странице и проверять, все ли работает нормально.

Итак, давайте рассмотрим следующие критерии приемки для тестирования нашего приложения!

  1. Перейдите на главную страницу и убедитесь, что там есть список пользователей, а кнопка «просмотр» должна быть работоспособной и доступной.
  2. Отметьте «О нас» и убедитесь, что на странице есть заголовок «О нас».
  3. Проверьте страницу «Свяжитесь с нами» и убедитесь, что на ней есть заголовок «Свяжитесь с нами».
  4. Убедитесь, что функция добавления / редактирования / удаления работает на странице приложения ToDo

Я уже написал тестовые сценарии для наших критериев приемки, так что давайте запустим это, и я объясню это через некоторое время!

Откройте новый терминал (оставьте приложение Vue запущенным в другом терминале) и выполните следующую команду:

npm run test

Это запустит новый браузер Chrome и начнет тестирование нашего приложения - просто подождите и дайте ему закончить.

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

Я написал четыре теста, и они прошли успешно!

Теперь давайте разберемся, как это было написано - откройте там файл package.json. Я добавил следующую строку кода в разделе scrips.

"test": "testcafe chrome test/cases/*.test.js -S -s screenshots"

Поэтому, когда мы запускаем npm run test из терминала / командной строки, эта команда будет выполнена.

Давайте разберемся с этими параметрами!

testcafe - это библиотека, которую мы используем здесь для выполнения теста E2E.

chrome - здесь мы должны определить имя браузера, в котором мы хотим выполнить тест. Это может быть firefox,safari и т. Д. Щелкните здесь, чтобы увидеть дополнительную поддержку браузера.

test/cases/*.test.js - Я написал все тесты в новом каталоге тестов, поэтому здесь мы должны определить путь к нему, и *.test.js означает, что я хочу запустить все свои .test.js files

-S -s screenshots означает, что если тест не пройден, он сделает снимок экрана и сохранит его в папке снимков экрана.

Наконец, давайте разберемся с тестовыми скриптами!

test/cases/ - это каталог, в который мы помещаем все наши тестовые скрипты. Теперь откройте файл aboutUs.test.js, вы должны увидеть следующий код:

import selectors from '../model/selectors.js';
fixture(`About us Page`)
   .page('http://localhost:8080');

test('Check heading is exist on about us page! ', async tc => {
   await tc
   .click(selectors.aboutMenu)
   .expect(selectors.heading.innerText).eql("About Us")
});

Теперь давайте разберемся с этим кодом! пока игнорируйте первую строку.

Fixture означает контейнер, здесь вы можете назвать этот тестовый скрипт - для чего именно этот скрипт!

Затем у нас есть test функция, мы можем написать несколько тестовых функций под одним fixture.

Когда мы запустим npm run test, эти тестовые функции будут выполнены.

Сначала он запустит браузер и откроет эту страницу http://localhost:8080, затем мы нажимаем About Us меню, а затем проверяем, есть ли у нас текст заголовка About Us.. Если система может его найти, мы должны увидеть зеленую галочку под окном консоли.

import selectors from '../model/selectors.js';

Я создал все селекторы в другом файле, чтобы мы могли импортировать и повторно использовать их.

Так же, как aboutUs.test.js, были написаны другие тестовые файлы. Ознакомьтесь с ними и дайте мне знать в разделе комментариев ниже, если у вас возникнут какие-либо затруднения.

Вот и все! Я надеюсь, что вы нашли какую-то ценность в этом уроке.

Спасибо за чтение!