Автоматизированное тестирование стало неотъемлемой частью Agile-способа разработки программного обеспечения. По мере роста приложения становится крайне важно иметь надежную среду тестирования, чтобы справиться со скоростью разработки, обнаруживать ошибки на ранней стадии и обеспечивать качество. Однако для достижения большей скорости, масштабируемости, более широкого покрытия тестами и повышения рентабельности инвестиций становится важным применять различные стратегии тестирования. WebdriverIO — это среда тестирования JavaScript, широко используемая ведущими компаниями по всему миру для простого и лаконичного выполнения всех их потребностей в тестировании, быстро и эффективно.

Построенный на основе NodeJS и Selenium Webdriver (W3C WebDriver) API, WebdriverIO поддерживает тестирование как веб-приложений, так и мобильных приложений. Поскольку вы не торопитесь читать эту статью, это означает, что вы можете попасть в любую из следующих категорий:

  • Возможно, вы только начинаете работать с WebdriverIO и хотите заложить основу для создания надежной среды для тестирования JavaScript.
  • Вы уже используете WebdriverIO и ищете, как оптимизировать свою структуру и ускорить тестирование JavaScript.
  • Возможно, вам будет интересно получить некоторое представление о том, как повысить уровень вашего JavaScript с помощью игры для автоматизированного тестирования Selenium и извлечь больше из фреймворка.

В этой статье мы попытаемся удовлетворить каждое из этих требований и посмотрим, как ускорить тестирование JavaScript. Надеясь, что по крайней мере несколько из упомянутых здесь советов спасут ваш день, давайте начнем!

Лучшие практики для использования при разработке WebdriverIO Framework

Честно говоря, настройка среды автоматического тестирования — непростая задача, особенно если вы используете JavaScript с Selenium. Но как только фундамент заложен правильно, при своевременном обслуживании преимущества, которые можно получить, безграничны.

В этом разделе мы обсудим некоторые ключевые моменты, которые необходимо учитывать, особенно если вы только начинаете настройку фреймворка WebdriverIO для тестирования JavaScript. Давайте рассмотрим это!

1.Версия WebdriverIO

Прежде всего, выберите последнюю версию WDIO, то есть в настоящее время v6, выпущенную в начале 2020 года. Согласно официальной документации, LTS будет предоставляться для версии 5 до апреля 2021 года, а версия 4 в настоящее время устарела. Теперь давайте посмотрим на некоторые из желаемых функций, которые может предложить версия 6.

a) Нативно поддерживает Puppeteer

Чтобы запустить локальный тестовый пример, вы можете свободно переключаться между API Puppeteer и WebdriverIO по своему усмотрению. Кроме того, вам больше не нужно будет загружать драйвер браузера. С помощью WebdriverIO вы можете проверить, запущен ли драйвер браузера и доступен ли он по адресу localhost:4444/. Если это не так, проверьте, использует ли он Puppeteer в качестве запасного варианта. Возможность доступа к Puppeteer в ваших тестах позволяет вам:

  • Используйте возможности протокола Chrome DevTools с гораздо более богатым набором функций автоматизации.
  • Запускайте команды в Puppeteer намного быстрее. Следовательно, это может помочь ускорить локальное выполнение.

б) Повышение производительности

Это было одной из основных целей разработки WDIO v6. Он также содержит множество внутренних улучшений, которые ускорят выполнение тестов и снизят нагрузку на ЦП и память.

И многое другое. Вы всегда можете обратиться к официальной документации WebdriverIO, чтобы узнать больше о WebdriverIO v6.

2. Объектная модель страницы (POM)

POM — это шаблон проектирования фреймворка, широко используемый Agile-практиками для упрощения сопровождения тестовых сценариев и расширения возможностей повторного использования кода. Реализация такого подхода, как POM, поможет вам эффективно управлять вашими локаторами, уменьшить дублирование и сделать ваш фреймворк более удобным для программиста.

Таким образом, даже если это напрямую не ускорит ваше время выполнения, в долгосрочной перспективе подход POM может сэкономить ваше время, затрачиваемое на создание и поддержку тестовых сценариев для тестирования JavaScript. Вы можете обратиться к странице Объектная модель страницы WebdriverIO, чтобы узнать больше об этом.

3. Создание вспомогательных методов

Теперь это также связано с возможностью повторного использования кода и простотой обслуживания. По сути, идея состоит в том, чтобы обернуть код для часто выполняемых действий, таких как вход в систему, нажатие на что-либо, ожидание результата, выход из системы и т. д., в метод, чтобы их можно было совместно использовать и повторно использовать во всех скриптах.

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

4. Не тестируйте один и тот же функционал дважды
Чтобы ускорить тестирование, мы должны стратегически подходить к тестированию. Сокращение повторяющихся и предотвратимых сценариев напрямую помогает сократить количество тестовых случаев.

Излишне объяснять, чем меньше количество тестовых случаев, тем быстрее результат выполнения.

5. Избегайте жестких URL-адресов

В WebdriverIO у нас есть файл конфигурации wdio.conf.js, который помогает нам указать расположение тестов, фреймворков, которые вы хотите использовать, репортеров, браузеров и всех других общих конфигураций проекта.

Еще одна полезная опция — настроить baseUrl приложения здесь, чтобы нам не нужно было указывать его каждый раз в наших тестовых сценариях.

Но, как правило, в большинстве случаев нам может потребоваться запустить приложение в нескольких средах, таких как разработка, контроль качества, подготовка, производство и т. д., каждая из которых имеет разные URL-адреса. В этом случае мы можем легко настроить URL-адреса, объявив переменную среды и передав сведения о среде/URL-адресе, в котором должен выполняться тест, вместе с командой запуска теста.

Шаги настройки кратко описаны ниже:

Шаг 1. Создайте отдельный файл для хранения URL-адресов и экспортируйте их. Здесь мы создали файл с именем «wdio.config.url.js» (дайте любое имя по выбору)

Шаг 2. Остальные настройки необходимо выполнить в файле wdio.conf.js. Прежде всего, требуется файл URL.

const urls = require(‘./wdio.config.url’)

Шаг 3. Создайте переменную среды для передачи значений URL.

const ENV = process.env.ENV

Шаг 4. Создайте условие для проверки допустимости значения, переданного для ENV.

`if (!ENV || !['qa', 'dev', 'live'].includes(ENV)) {
    console.log('Invalid environment! Please select : ENV=qa|dev|live')
    process.exit()
}

Шаг 5. Теперь в файле exports.config измените baseUrl, чтобы он соответствовал переменной среды.

baseUrl: url[process.env.ENV],

Шаг 6. Вот и все. Теперь вместе с командой тестового запуска передайте значение для ENV.

npm run test ENV=dev

Здесь будет сопоставлен URL-адрес для DEV, и начнется выполнение теста. Если передано какое-либо недопустимое значение или значение ENV пропущено, соответствующие журналы будут созданы в соответствии с созданным нами условием проверки.

6. Написание хорошего тестового сценария

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

  • Запись только одного тестового примера в тестовый файл. Это помогает сохранять тестовые случаи независимыми друг от друга, анализировать сбои, а также помогает в параллельном тестировании.
  • Держите его коротким или атомарным. Сократите количество шагов до 20 (золотого правила не существует). Используйте вспомогательные методы.

Вы можете получить этот сертификат в качестве доказательства опыта в области автоматизации тестирования с помощью JavaScript, чтобы расширить свои возможности и повысить свою карьеру.

Вот краткий обзор сертификации Selenium JavaScript 101 от LambdaTest:

Вы читали о CSS Paint API? Css-paint-api — это библиотека Python, которая позволяет создавать изображения, используемые CSS, с помощью кода.

Оптимизируйте свой фреймворк, чтобы ускорить выполнение тестов JavaScript

До сих пор мы рассмотрели некоторые из лучших практик, которые можно использовать при разработке среды автоматизированного тестирования. Здесь мы обсудим, как мы можем оптимизировать инфраструктуру WebdriverIO для ускорения тестирования JavaScript при использовании JavaScript с Selenium.

Давайте рассмотрим некоторые возможные факторы, которые могут замедлить тестирование, и методы, которые можно использовать.

1. Параллельное тестирование

По мере роста возможностей приложения растет и количество тестов. Становится все более и более важным повышать скорость выполнения и сокращать общее время выполнения. Один из способов добиться этого — параллельное тестирование, т. е. одновременный запуск тестовых сценариев.

Чтобы включить параллельное тестирование, настройте свойство maxInstances в файле конфигурации. См. приведенный ниже пример кода.

exports.config = {
            // ...
            // set maxInstance for all browser
            maxInstances: 3,
            // ...
            capabilities: [{
                browserName: 'firefox'
            }, {
                browserName: 'chrome'
            }],
            // ...
        }

Здесь для maxInstances установлено значение 3, и упомянуты 2 возможности (Chrome, Firefox). Математика проста. Средство запуска тестов WDIO создаст 6 процессов, т. е. 3 тестовых файла будут запущены одновременно в двух браузерах. Вы можете настроить значения в соответствии с вашими требованиями.

2. Отключение снимков экрана

Скриншоты часто являются нашими спасителями, когда дело доходит до отладки. Но это также связано с затратами времени на выполнение и замедлением ваших тестов. Следовательно, рекомендуется включать снимки экрана только в случае сбоя теста вместо того, чтобы делать снимки экрана для каждого шага.

Эта официальная документация WebdriverIO на скриншоте поможет вам реализовать это с помощью хуков.

3. Регистрация ошибок

Настройка регистрации ошибок не оказывает прямого влияния на скорость выполнения. Однако идея состоит в том, чтобы включать журналы только при возникновении какой-либо ошибки, что делает данные журнала более актуальными, помогая нам в быстрой отладке.

Уровень детализации журнала можно задать в файле wdio.conf.js.

4. Используйте правильные методы ожидания

WebdriverIO предоставляет нам различные методы для подтверждения ожидания в программе. Хорошо иметь представление о том, что следует использовать, когда и, самое главное, чего следует избегать.

а) пауза()

Этот метод приостанавливает выполнение на определенное время. Чтобы избежать ненадежных результатов тестирования, рекомендуется не использовать эту команду для ожидания отображения элемента, загрузки страницы или выполнения действия. Лучше использовать такие команды, как waitUntil, waitForExist или другие команды waitFor*.

```browser.pause(milliseconds)

б) ждать до тех пор ()

Эта команда ожидания — ваше универсальное оружие, если вы хотите чего-то подождать. Он ожидает условие и ждет, пока это условие не будет выполнено с истинным значением.

browser.waitUntil(condition, { timeout, timeoutMsg, interval })

c) ждать*

WebdriverIO предлагает множество API-интерфейсов waitFor, которые помогают дождаться отображения элемента, его существования, кликабельности и т. д.

  • ждатьForClickable
  • ждатьForDisplayed
  • ждатьфоренаблед
  • ждатьForExist

Использование методов waitUntil() или waitFor* улучшит производительность скрипта. Поскольку к элементам можно получить доступ, как только они станут доступны, и дополнительное время ожидания не требуется.

Обязательно ознакомьтесь с официальной Документацией по WebdriverIO API для получения дополнительной информации.

5. Используйте автономные браузеры и драйверы

Безголовый браузер — это браузер, который не имеет пользовательского интерфейса. Безголовое тестирование — это способ запуска ваших тестовых случаев без пользовательского интерфейса браузера, что ускоряет работу вашего скрипта. Это вариант, который вы можете рассмотреть, если вам не нужен настоящий браузер для тестирования или использования CI/CD.

И не нужно беспокоиться! Вы по-прежнему сможете делать скриншоты и видеть, как ваше приложение выглядит в автономном режиме. Отладка может быть выполнена так же эффективно. В WDIO, добавив несколько аргументов в свой файл конфигурации, вы можете использовать безголовую версию вашего любимого браузера.

а) Для Firefox

browserName: 'firefox',
'moz:firefoxOptions': {
    args: ['-headless']
},

б) Для Chrome

browserName: 'chrome',        
        'goog:chromeOptions': {        
            args: ['--headless', '--disable-gpu']
        }

Взгляните на это: :placeholder-show псевдокласса CSS — элементы формы иногда дают пользователю подсказку о типе ввода, который они должны вводить. Пример, атрибут-заполнитель HTML5. :input:placeholder-show соответствует элементу, в котором отображается такой текст-заполнитель.

Дальнейшие улучшения вашей тестовой среды

WebdriverIO — чрезвычайно многофункциональная среда, обеспечивающая тесную интеграцию с различными службами. Сюда входят Jenkins, Bamboo, а также Docker для реализации CI/CD, Applitools для визуального тестирования, LambdaTest для кросс-браузерного тестирования и т. д. В этом разделе мы поговорим о нескольких широко применяемых стратегиях при использовании JavaScript с Selenium, которые помогут повысьте уровень автоматизированного тестирования JavaScript.

1) Автоматизированное тестирование с использованием конвейера CI/CD

Чтобы добиться быстрой доставки с обратной связью по качеству, крайне важно интегрировать автоматизированное тестирование в конвейер CI/CD (непрерывная интеграция/непрерывная доставка). Это помогает включить непрерывное тестирование.

WebdriverIO обеспечивает тесную интеграцию с такими системами непрерывной интеграции, как Jenkins. Будучи открытым исходным кодом, Jenkins широко используется в мире автоматизированного тестирования. С помощью нескольких быстрых и простых шагов можно добиться интеграции Jenkins в вашу структуру WebdriverIO. Обязательно ознакомьтесь с официальным руководством Jenkins по настройке Jenkins!

Еще одна предпочтительная стратегия — интегрировать Jenkins с контейнерными технологиями, такими как Docker. С появлением Docker практически все необходимые зависимости приложений могут быть контейнеризированы. С помощью этого сервиса WDIO-Docker вы можете запускать свой контейнер приложения в своем CI и в полной изоляции.

2) Кроссбраузерное тестирование с помощью Selenium Grid

Чтобы оставаться впереди на высококонкурентном рынке, наша обязанность как тестировщиков — обеспечить качество приложения во всех сценариях, т. е. приложение должно вести себя должным образом на всех платформах, браузерах и устройствах без сбоев. Именно здесь на сцену выходит тестовое покрытие и кросс-браузерное тестирование.

Когда дело доходит до распределенного выполнения тестов, Cloud Selenium Grid — это всегда хороший выбор. Он может одновременно запускать тестовые примеры в разных версиях браузеров и разных операционных системах. При использовании JavaScript с Selenium вы можете использовать Selenium Grid вместе с подходящим поставщиком облачных решений для кросс-браузерного тестирования. Это может быть оптимальной стратегией, которую вы можете использовать для обеспечения качества.

LambdaTest — это популярная облачная платформа, которая предоставляет вам доступ к более чем 2000 браузерам как для мобильных устройств, так и для настольных компьютеров, чтобы помочь вам получить максимальное тестовое покрытие во время автоматизированного тестирования браузера. Кроме того, вы можете выбирать из широкого спектра операционных систем Windows и Mac, а также всех устаревших и новейших браузеров.

WedriverIO предоставляет вам услугу по беспрепятственной интеграции LambdaTest в вашу структуру с помощью нескольких быстрых и простых шагов. Давайте взглянем!

Шаг 1: В терминале вашего проекта введите следующую команду, чтобы сохранить службу LambdaTest как devDependency.

npm i wdio-lambdatest-service --save-dev

Шаг 2. Создайте бесплатную учетную запись или войдите в свою учетную запись LambdaTest и получите свое уникальное имя пользователя и ключ доступа. Вы можете получить информацию из раздела Профиль.

Шаг 3. Теперь давайте внесем некоторые изменения в файл конфигурации. В вашем файле wdio.conf.js

user= process.env.LT_USERNAME || "myusername",
key= process.env.LT_ACCESS_KEY || "1234567890",
 
exports.config = {
 
    user,
    key,
    logFile : './logDir/api.log',
    services: [
        ['lambdatest', {
            tunnel: true
        }]
    ],
    hostname: 'hub.lambdatest.com',
    path: '/wd/hub',
    port: 80,
    capabilities: [{
        build: ‘WebdriverIO-RemoteSelenium-Test’
        maxInstances: 5,
        browserName: 'chrome',
        acceptInsecureCerts: true,
        network: true,
        video: true,
        visual: true,
        console: true
 
    }],

Это дополнительные настройки, которые необходимо выполнить:

  • Передайте свой токен доступа и сведения о пользователе, создав две переменные: user и key.
  • Установите для туннеля значение true, чтобы включить маршрутизацию соединений из облака LambdaTest через ваш компьютер.
  • Задайте имя хоста, соответствующее LambdaTest.
  • При желании вы также можете включить форматы отчетов, такие как видеозапись, консоль, сетевые журналы и т. Д., Чтобы они были правдой.

Шаг 4. Запустите тесты. Используйте подходящую вам команду.

npx wdio wdio.conf.js

Тест запускается, и журналы можно просмотреть в терминале.

Чтобы наблюдать за текущим статусом в реальном времени, перейдите на панель автоматизации в LambdaTest.

Мы можем анализировать отдельные отчеты о выполнении тестов из журналов автоматизации.

Мы успешно запустили наши тестовые примеры, используя решение для автоматизированного кросс-браузерного тестирования, предоставленное LambdaTest, без каких-либо проблем!

Знаете ли вы, что CSS overscroll-behavior позволяет управлять прокруткой содержимого контейнера прокрутки, когда его положение в окне браузера больше или равно размеру порта прокрутки.

Заключение

Внедрена автоматизация для ускорения процесса тестирования и выявления ошибок разработки на ранней стадии. Все больше и больше компаний отказываются от традиционного способа ручного тестирования и переходят к более «смещенному влево» подходу, сосредотачиваясь на том, как использовать преимущества автоматизированного тестирования в процессе разработки.

В этой статье мы рассмотрели некоторые из лучших практик для создания надежной среды с использованием WebdriverIO при использовании JavaScript с Selenium. Мы также обсудили различные методы оптимизации производительности за счет не только сокращения времени выполнения за счет ускорения теста, но и времени отладки и обслуживания.

Кроме того, мы также рассмотрели несколько лучших стратегий, позволяющих оставаться впереди, таких как реализация CI/CD и кросс-браузерное тестирование. С помощью LambdaTest мы использовали облачное решение для удаленной Selenium Grid для проведения параллельного кросс-браузерного тестирования на нескольких платформах.

Вы также можете проверить, как выполнить ручное тестирование браузера на платформе LambdaTest.

Надеюсь, этот блог поможет вам оптимизировать фреймворк и ускорить тестирование. Если вы хотите оптимизировать качество своего веб-приложения, разблокировав покрытие на более широком спектре платформ, браузеров или версий, не стесняйтесь исследовать платформу LambdaTest.

Удачного тестирования!