Тестирование записей
В Chrome DevTools есть панель Recorder, которая позволяет пользователям записывать и воспроизводить автоматизированные шаги в Chrome. Эти шаги можно экспортировать в тесты WebdriverIO с помощью расширения, что делает написание тестов очень простым.
Что такое Chrome DevTools Recorder
Chrome DevTools Recorder - это инструмент, который позволяет записывать и воспроизводить тестовые действия непосредственно в браузере, а также экспортировать их в формате JSON (или экспортировать в e2e тесты), а также измерять производительность тестов.
Инструмент прост в использовании, и поскольку он встроен в браузер, нам удобно не переключать контекст или работать с какими-либо сторонними инструментами.
Как записать тест с помощью Chrome DevTools Recorder
Если у вас установлен последний Chrome, Recorder уже будет установлен и доступен для вас. Просто откройте любой веб-сайт, щелкните правой кнопкой мыши и выберите "Inspect". В DevTools вы можете открыть Recorder, нажав CMD/Control + Shift + p и введя "Show Recorder".
Чтобы начать запись пользовательского сценария, нажмите на "Start new recording", дайте вашему тесту имя, а затем используйте браузер для записи теста:
Следующий шаг, нажмите на "Replay", чтобы проверить, была ли запись успешной и делает ли она то, что вы хотели. Если все в порядке, нажмите на значок export и выберите "Export as a WebdriverIO Test Script":
Опция "Export as a WebdriverIO Test Script" доступна только если вы установили расширение WebdriverIO Chrome Recorder.
Вот и все!
Экспорт записи
Если вы экспортировали поток как тестовый скрипт WebdriverIO, он должен загрузить скрипт, который вы можете скопировать и вставить в свой тестовый набор. Например, приведенная выше запись выглядит следующим образом:
describe("My WebdriverIO Test", function () {
it("tests My WebdriverIO Test", function () {
await browser.setWindowSize(1026, 688)
await browser.url("https://webdriver.io/")
await browser.$("#__docusaurus > div.main-wrapper > header > div").click()
await browser.$("#__docusaurus > nav > div.navbar__inner > div:nth-child(1) > a:nth-child(3)").click()rec
await browser.$("#__docusaurus > div.main-wrapper.docs-wrapper.docs-doc-page > div > aside > div > nav > ul > li:nth-child(4) > div > a").click()
await browser.$("#__docusaurus > div.main-wrapper.docs-wrapper.docs-doc-page > div > aside > div > nav > ul > li:nth-child(4) > ul > li:nth-child(2) > a").click()
await browser.$("#__docusaurus > nav > div.navbar__inner > div.navbar__items.navbar__items--right > div.searchBox_qEbK > button > span.DocSearch-Button-Container > span").click()
await browser.$("#docsearch-input").setValue("click")
await browser.$("#docsearch-item-0 > a > div > div.DocSearch-Hit-content-wrapper > span").click()
});
});
Убедитесь, что вы пересмотрели некоторые локаторы и при необходимости заменили их на более устойчивые типы селекторов. Вы также можете экспортировать поток как JSON-файл и использовать пакет @wdio/chrome-recorder для преобразования его в реальный тестовый скрипт.
Следующие шаги
Вы можете использовать этот поток для легкого создания тестов для ваших приложений. Chrome DevTools Recorder имеет различные дополнительные функции, например:
Обязательно ознакомьтесь с их документацией.
