Если вы ищете или ищете, как выполнить сквозное (E2E) тестирование для своего приложения vue.js, то вы попали в нужное место!
Потерпите меня, в конце этого руководства вы узнаете, как выполнять E2E для Vue.js. В этом руководстве я буду использовать одну из известных библиотек Testcafe.
Если вы раньше не слышали о Testcafe, не волнуйтесь, я расскажу вам, как мы идем! или можете посмотреть здесь.
Прежде всего, нам нужно приложение Vue, я создал образец приложения для демонстрационных целей.
Клонировать этот репозиторий:
git clone https://github.com/Tech-49/E2E-Testcafe-Vue.git cd E2E-Testcafe-Vue
После клонирования выполните следующие команды:
npm install
Чтобы установить зависимостиnpm run serve
Чтобы запустить сервер разработки
По умолчанию ваше приложение должно работать на порту 8080. Зайдите в браузер и проверьте это - http: // localhost: 8080
Вы должны увидеть, что эти страницы работают:
Теперь, как человек, если я хочу протестировать эти страницы, то я буду переходить от страницы к странице и проверять, все ли работает нормально.
Итак, давайте рассмотрим следующие критерии приемки для тестирования нашего приложения!
- Перейдите на главную страницу и убедитесь, что там есть список пользователей, а кнопка «просмотр» должна быть работоспособной и доступной.
- Отметьте «О нас» и убедитесь, что на странице есть заголовок «О нас».
- Проверьте страницу «Свяжитесь с нами» и убедитесь, что на ней есть заголовок «Свяжитесь с нами».
- Убедитесь, что функция добавления / редактирования / удаления работает на странице приложения 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
, были написаны другие тестовые файлы. Ознакомьтесь с ними и дайте мне знать в разделе комментариев ниже, если у вас возникнут какие-либо затруднения.
Вот и все! Я надеюсь, что вы нашли какую-то ценность в этом уроке.
Спасибо за чтение!