Этот блог изначально был опубликован на веб-сайте LambdaTest. Ссылка на оригинальный пост — https://www.lambdatest.com/learning-hub/playwright-component-testing

Playwright предоставляет множество интересных функций для работы и улучшения ваших тестов, а то, как он работает, может значительно ускорить ваши тесты. Драматург является одним из пионеров этого. Этого нет в Selenium, но можно попробовать с Cypress (доступен в виде бета-версии).

Источник

Последний выпуск Драматург (v1.27) содержит новые интересные функции, особенно для тех, кто работает с интерфейсными проектами.

Пока вы читаете это, вы, возможно, уже думаете о том, о чем мы говорим, верно? Если нет, то вот подсказка.

«Это независимый фрагмент кода, который можно использовать повторно. Они бывают двух типов: классы и функции».

Вы его случайно не получили? Да? Хорошо, мы говорим о компонентах.

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

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

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

Что такое компонентное тестирование

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

Итак, для тех, кто знаком с этим, Jest предлагает отличный способ тестирования ваших компонентов. Он визуализирует компоненты в виртуальной среде (например, JSDom) и позволяет запускать для них некоторые тесты, чтобы вы могли тестировать свои компоненты в изоляции.

Итак, для тех, кто с ним знаком, Jest предлагает отличный способ тестирования ваших компонентов. Он визуализирует компоненты в виртуальной среде (например, JSDom) и позволяет запускать для них некоторые тесты, чтобы вы могли тестировать свои компоненты в изоляции.

Это довольно круто, правда? Но что, если вы сможете смонтировать эти компоненты в реальном браузере и взаимодействовать с ними, как в любом сквозном тесте?

Но вы спросите, зачем мне это нужно.

Ну, это очень правильный вопрос, но есть и веская причина. Давайте проверим это.

Тестирование компонентов против модульного тестирования

Как указано в приведенном выше разделе этого руководства по тестированию компонентов Playwright, рендеринга компонентов в виртуальной среде JS иногда недостаточно; это чисто JS и даже не действует как настоящий браузер.

В этом одно из основных отличий Юнит-тестирования от Компонентного тестирования.

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

В этом руководстве по тестированию компонентов Playwright вы научитесь настраивать свое первое внешнее приложение с помощью React и начнете тестировать эти компоненты. Давайте посмотрим!

За кулисами

Драматург использовал Vite в качестве инструмента для сборки. Когда тесты выполняются за кулисами, Playwright создает пакет с компонентами, необходимыми для теста, и обслуживает их с помощью статического сервера. Компоненты генерируются в index.html с помощью команды mount.

Монтаж означает, что компонент будет добавлен в DOM. Когда компонент только что создан, это не что иное, как простой JavaScript, виртуальное представление компонента.

Монтирование превращает этот виртуальный объект в реальное и окончательное представление этого компонента в DOM.

Создание React-приложения для тестирования компонента Playwright

React — это библиотека с открытым исходным кодом, которая помогает разработчикам быстро писать пользовательские интерфейсы. Он очень популярен и был создан Facebook примерно в 2011 году. В настоящее время его поддерживает огромное сообщество и миллионы загрузок.

Его текущая версия — v18, и, согласно репозиторию GitHub, React используют 11,4 миллиона пользователей!

Установка Реакта

Время попрактиковаться, давайте сделаем наш первый шаг и установим React для этого руководства по тестированию компонентов Playwright:

  • Откройте код Visual Studio.
  • Откройте новый терминал.
  • Выполните следующую команду на терминале.
npx create-react-app myAppName

Имя

Сделанный!

Как вы можете видеть в коде Visual Studio, проект успешно создан. Давайте посмотрим, как это выглядит:

Структура проекта

Но что это за папки и файлы?

Мы рассмотрели node_modules, package-lock.json, .gitignore и package.json в предыдущем руководстве Сквозное тестирование Playwright, когда изучали настройку Playwright.

Общая папка:

  • favicon.ico: это небольшое изображение, связанное со страницей или приложением. В нашем случае это изображение реакции, которое будет отображаться во вкладке с заголовком страницы.
  • index.html:основная запись HTML. Это обеспечивает структуру или содержимое для отображения вашего приложения.
  • логотипы: папка Src: логотипы React, файлы png.
  • manifest.json: здесь вы найдете некоторую информацию о своем приложении. Это может быть автор, ресурсы, версии и т. д.
  • robots.txt:решает, разрешены ли поисковые роботы или нет. Краулеры — это программы для навигации и сбора данных из приложений.

Исходная папка:

  • App.css: содержит стили для компонентов нашего приложения.
  • App.js: эта функция возвращает код нашего компонента приложения. Это основной компонент приложения.
  • index.css: стили для index.js.
  • index.js: этот файл содержит функцию, которая сообщает вашему компоненту приложения об отображении в определенном элементе index.html, который называется «root».
  • logo.svg: векторное графическое изображение.
  • reportWebVitals.js. Этот файл помогает нам измерять производительность нашего приложения.
  • setupTest.js: этот файл только импортирует библиотеку для JSDom и дает нам доступ к ней.

Теперь, когда мы знаем, что было создано, давайте попробуем запустить его и посмотреть, как выглядит наше приложение. Но как? Можем ли мы сделать это уже? Не слишком ли рано? Что ж, как уже упоминалось в предыдущем разделе этого руководства по тестированию компонентов Playwright, React позволяет легко создать простое приложение :)

Запуск приложения

Если мы посмотрим на файл package.json, мы увидим раздел "скрипты". Существует команда под названием "start". Давайте перейдем к нашему приложению в терминале и выполним эту команду.

cd component-app
npm start

Хороший! Приложение React уже запущено и работает!

Установка модуля компонентов драматурга

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

Компоненты драматурга — это экспериментальная функция, поэтому модуль называется experimental-ct. Итак, в своем терминале вы можете запустить следующую команду:

npm init playwright@latest - -  - -ct

Вам будет предложено задать несколько вопросов о языке (мы собираемся использовать TypeScript) и о том, какой фреймворк вы хотите использовать (мы используем React).

Ниже показан вывод терминала:

После установки вы должны увидеть следующий вывод:

Структура компонента драматурга

Когда модуль Playwright Component устанавливается, он автоматически создает для вас некоторые папки и файлы, поэтому вы можете заметить, что структура вашего проекта немного изменилась. Давайте посмотрим, что в нем сейчас:

  • драматург: создана новая папка; он содержит два файла.
  • index.html:Этот файл будет использоваться Playwright для монтирования вашего компонента, и он сделает это так же, как React › Public › index.html, используя «корневой» элемент.
  • index.ts. Этот файл предназначен для включения тем, стилей или даже применения кода для страницы, на которой будет смонтирован ваш компонент.
  • playwright-ct.config.ts: файл конфигурации playwright, в котором вы можете настроить браузер, время ожидания и т. д.

Теперь у вас запущено и ваше приложение, и установлена ​​тестовая среда. Время дать им попробовать!

Создание тестового файла

Возможно, у вас уже есть опыт создания тестового файла для тестирования компонента Playwright, но всегда полезно иметь краткое напоминание. Итак, давайте воспользуемся существующей папкой "src" и создадим под ней "tests" и, конечно же, наш тестовый файл с именем: components.spec.tsx. .

Теперь расширение нашего файла .tsx вместо .ts, почему?. Компоненты React используют синтаксис JSX, поэтому, чтобы наши файлы принимали/встраивали/поддерживали его, нам нужно обновить расширение с .ts до .tsx.

Написание теста

Хорошо, мы почти у цели. Теперь нам нужно добавить код в наш новый тестовый класс. Вот как выглядит простой компонентный тест:

Разрешение JSX

Компоненты React обычно пишутся на JavaScript. JSX — это расширение JavaScript, которое расшифровывается как JavaScript XML. Он обеспечивает более простой способ структурирования компонентов, позволяя нам писать HTML в React.

Прежде чем поделиться с вами этим кодом, я хочу предупредить вас. Как вы можете видеть на изображении, с этим ‹App› что-то не так. Это потому, что нам нужно включить JSX.

Для этого мы можем перейти к нашему tsconfig.json и добавить эту строку в параметры компилятора:

“react-jsx”

И сохранить его.

tsconfig.json будет выглядеть так:

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "target": "ESNext",
        "module": "commonjs",
        "moduleResolution": "Node",
        "sourceMap": true,
        "outDir": "../tests-out",
    }
 }

Решено!

Теперь давайте немного обновим наш компонент App.js, изменив текст. Откройте файл и замените «Learn React» на «My First Component».

import { test, expect } from '@playwright/experimental-ct-react';
import Header from '../../src/header';
import App from '../../src/App';

test('App should work', async ({ mount }) => {
  const component = await mount(<App></App>);
  await expect(component).toContainText('My First Component');
});

Понимание теста

Здесь у нас есть очень простой тест для тестирования компонента Playwright. Как и в случае с любым другим тестом драматурга, нам сначала нужно импортировать наши модули, в данном случае экспериментальный-ct-react, который мы установили в начале.

Мы также импортируем наш компонент App.js. Это для того, чтобы тест мог его смонтировать.

Затем у нас есть сам тест. Что же мы имеем здесь? Вместо того, чтобы использовать "страницу" или "запрос" в качестве фикстур в тесте, мы используем нечто, называемое "монтирование", но что это такое? ? Итак, mount позволяет нам поместить компонент в DOM для его рендеринга.

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

Последний шаг — это просто утверждение.

Но почему это так мощно? Что ж, как объяснялось ранее, это сочетание мощности Node.js для рендеринга ваших компонентов без раскрутки всего приложения и использования всех функций, которые предоставляет Playwright!

И что еще более важно, это будет создано и протестировано в НАСТОЯЩЕМ браузере.

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

При установке нашего модуля Playwright Components он делает для нас кое-что еще. Если мы пойдем и проверим файл package.json, мы увидим кое-что новое.

Да, Playwright добавил для нас новую команду для выполнения нашего теста, так что давайте попробуем.

Запуск теста

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

Запускаем: npm run test-ct

Вы видели это? Экран едва виден, так как тест проходит молниеносно! Практически невозможно увидеть отрисовку приложения, верно?

Отладка теста

Но давайте сделаем кое-что для вас. Мы отладим тест, чтобы вы знали, что это происходит!

Готово! Испытание пройдено!

Добавление дополнительных компонентов в приложение

Теперь давайте попробуем создать новый, свежий и простой компонент. В папке "src" мы создадим файл с именем "header.js".

Откройте файл и вставьте этот код, который очень похож на код App.js, но проще:

function Header () {
  return (
    <header>
       <h1>Header Testing Component</h1>
    </header>
  )
}
export default Header

Хорошо. Компонент заголовка уже создан.

Теперь мы собираемся включить этот заголовок как часть нашего App.js, поэтому откройте этот файл и выполните следующие действия:

import Header from './header'

Теперь под первым ‹div› в приложении вставьте узел заголовка, например:

function App() {
  return (
    <div className="App">
       <Header/>
      <header className="App-header">

Ну... вот и все :) теперь ваш заголовок должен отображаться как часть вашего приложения. Давайте сделаем еще одну попытку. Вы можете отладить тест или запустить команду "npm start" и проверить, работает ли ваше приложение.

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

Если мы добавим еще одно утверждение в наш тест, мы сможем убедиться, что наш новый компонент отображается и имеет правильный текст; давай попробуем.

Обновление компонента

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

Например, мы можем добавить атрибут с именем «qa-id» в компонент заголовка, и как только он будет отображен, мы сможем найти его по этому уникальному значению. Давайте посмотрим, как это работает:

Откройте ваш header.js и обновите код следующим образом:

<header>
       <h1 qa-id="header-component">Header Testing Component</h1>
    </header>

Готово, теперь, когда вы обновили свой компонент и добавили атрибут, мы обновим тест и попытаемся его найти.

Обновление теста

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

test('should work', async ({ mount, page }) => {
  const component = await mount(<App></App>);
  await expect(component).toContainText('Learn React');
  await expect(page.locator("[qa-id='Header']")).toHaveText("Header Testing Component")
  page.close()
});

Круто, как думаешь, пройдет? Давайте посмотрим.

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

await expect(page.locator("[qa-id='Header']")).toHaveText("header testing component")

И… момент истины..

Как мы видим, тест просто провалился.

Тестирование компонента заголовка в изоляции

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

Как мы это делаем?

Перейдем к нашему component.spec.tsx и изменим импорт. Вместо приложения вам нужно будет импортировать свой заголовок, что-то вроде этого:

import Header from '../../src/header';

А теперь в самом тесте замените свой компонент приложения на заголовок.

import { test, expect } from '@playwright/experimental-ct-react';
import Header from '../../src/header';
test.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount, page }) => {
  const component = await mount(<Header></Header>);
  await expect(page.locator("[qa-id='Header']")).toHaveText("Header Testing Component")
  page.close()
});

Время отладить тест и посмотреть, что там.

Большой!

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

Визуальное тестирование компонентов

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

await expect(page.locator("header>h1")).toHaveScreenshot()

Первая попытка:

Повторить:

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

Запуск приложения в облачной сетке

Вы также можете запустить свое приложение и начать тестирование браузера в реальном времени, настроив туннель в LambdaTest. Когда дело доходит до браузерного тестирования драматурга, LambdaTest разработан, чтобы помочь вам выполнить кроссбраузерное тестирование. Он предоставляет онлайн-ферму браузеров из более чем 50 браузеров и браузерных версий Chrome, Chromium, Microsoft Edge, Mozilla Firefox, Opera и даже Webkit для тестирования компонентов Playwright.

Туннель создаст безопасное соединение между вашим компьютером и LambdaTest. После настройки туннеля вы можете нажать СТАРТ и протестировать свое приложение.

Улучшение компонента драматурга в существующем проекте

Если у вас уже есть React и вы уже настроили Playwright, или если случайно (это был мой личный опыт) вы работаете за прокси, ваш регистр npm может быть закеширован. Вы не можете инициировать эксперимент Драматурга. Есть еще один способ сделать это.

Поскольку Experiment-ct — это модуль, его можно установить как любой другой модуль npm, просто запустив команду в терминале.

«npm install @playwright/experimental-ct-react»

Это будет включать модуль как часть вашего проекта в node_modules. И вы также сможете увидеть его установленным в вашем package.json.

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

Добавление отсутствующих файлов

Сначала создайте папку Playwright. Вам нужно будет создать два файла в этой папке:

  • index.html
  • index.ts

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

<html lang="en">
 <body>
   <div id="root"></div>
   <script type="module" src="/playwright/index.ts"></script>
 </body>
</html>

Сделанный.

Добавление скрипта

Имейте в виду, что скрипт в файле package.json также необходимо будет добавить, чтобы вы могли выполнять тесты.

"test-ct": "playwright test -c playwright-ct.config.ts"

Теперь вы готовы продолжать двигаться вместе с ним!

Вы увлечены автоматизированным тестированием? Вы хотите углубить свой опыт в области драматургии или современного тестирования веб-приложений? Не смотрите дальше, так как эта сертификация Playwright 101 является идеальной мерой вашего опыта в качестве тестировщика автоматизации Playwright.

Заключение

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

  • Не нужно ждать, пока загрузятся все ресурсы (изображения, скрипты, шрифты).
  • Не нужно ждать, пока будет выполнен какой-либо другой компонент (например, если функция все еще находится в процессе).
  • Выполняется быстро.
  • Легче протестировать.

Эта функция может помочь улучшить ваш тест, чтобы легко писать очень маленькие (атомарные) сценарии и тестировать их изолированно в реальном браузере.

Надеюсь, вам понравится это руководство по тестированию компонентов Playwright, и вы сможете извлечь из него некоторые знания! Продолжаем тестировать!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .