Для веб-приложений

Интеграция ваших тестов WebdriverIO с Percy

Перед интеграцией, вы можете изучить учебное пособие Percy по созданию примера для WebdriverIO. Интегрируйте ваши автоматизированные тесты WebdriverIO с BrowserStack Percy, вот обзор шагов интеграции:

Шаг 1: Создайте проект Percy

Зарегистрируйтесь в Percy. В Percy создайте проект типа Web и назовите его. После создания проекта Percy генерирует токен. Запишите его. Вам нужно будет использовать его для установки переменной среды на следующем шаге.

Для подробной информации о создании проекта см. Создание проекта Percy.

Шаг 2: Установите токен проекта как переменную среды

Запустите данную команду, чтобы установить PERCY_TOKEN как переменную среды:

export PERCY_TOKEN="<your token here>"   // macOS or Linux
$Env:PERCY_TOKEN="<your token here>"   // Windows PowerShell
set PERCY_TOKEN="<your token here>"    // Windows CMD

Шаг 3: Установите зависимости Percy

Установите компоненты, необходимые для создания среды интеграции для вашего набора тестов.

Для установки зависимостей выполните следующую команду:

npm install --save-dev @percy/cli @percy/webdriverio

Шаг 4: Обновите ваш тестовый скрипт

Импортируйте библиотеку Percy, чтобы использовать метод и атрибуты, необходимые для создания скриншотов. В следующем примере используется функция percySnapshot() в асинхронном режиме:

import percySnapshot from '@percy/webdriverio';
describe('webdriver.io page', () => {
  it('should have the right title', async () => {
    await browser.url('https://webdriver.io');
    await expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js');
    await percySnapshot('webdriver.io page');
  });
});

При использовании WebdriverIO в автономном режиме, предоставьте объект браузера как первый аргумент функции percySnapshot:

import { remote } from 'webdriverio'

import percySnapshot from '@percy/webdriverio';

const browser = await remote({
  logLevel: 'trace',
  capabilities: {
    browserName: 'chrome'
  }
});

await browser.url('https://duckduckgo.com');
const inputElem = await browser.$('#search_form_input_homepage');
await inputElem.setValue('WebdriverIO');
const submitBtn = await browser.$('#search_button_homepage');
await submitBtn.click();
// the browser object is required in standalone mode
percySnapshot(browser, 'WebdriverIO at DuckDuckGo');
await browser.deleteSession();

Аргументы метода снимка:

percySnapshot(name[, options])

Автономный режим

percySnapshot(browser, name[, options])

• browser (обязательно) - Объект браузера WebdriverIO
• name (обязательно) - Имя снимка; должно быть уникальным для каждого снимка
• options - Смотрите настройки конфигурации для каждого снимка

Чтобы узнать больше, см. Percy snapshot.

Шаг 5: Запустите Percy

Запустите ваши тесты с помощью команды percy exec, как показано ниже:

Если вы не можете использовать команду percy:exec или предпочитаете запускать тесты с помощью параметров запуска IDE, вы можете использовать команды percy:exec:start и percy:exec:stop. Чтобы узнать больше, посетите Run Percy.

percy exec -- wdio wdio.conf.js

[percy] Percy has started!
[percy] Created build #1: https://percy.io/[your-project]
[percy] Running "wdio wdio.conf.js"
...
[...] webdriver.io page
[percy] Snapshot taken "webdriver.io page"
[...]    ✓ should have the right title
...
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!

Посетите следующие страницы для получения дополнительной информации:

• Интеграция ваших тестов WebdriverIO с Percy
• Страница переменных среды
• Интеграция с использованием BrowserStack SDK, если вы используете BrowserStack Automate.

Ресурс	Описание
Официальная документация	Документация Percy по WebdriverIO
Пример сборки - Руководство	Руководство Percy по WebdriverIO
Официальное видео	Визуальное тестирование с Percy
Блог	Представляем Visual Reviews 2.0