Изучение визуального сравнительного тестирования драматурга TypeScript
В мире тестирования автоматизации программного обеспечения обеспечение визуальной согласованности веб-приложений имеет первостепенное значение. Представьте себе сценарий, в котором крошечное изменение кода непреднамеренно приводит к визуальному сбою в пользовательском интерфейсе вашего приложения. Чтобы предотвратить подобные казусы, на помощь приходит визуальное сравнительное тестирование. В этом сообщении блога мы погрузимся в мир Playwright и TypeScript для эффективного визуального сравнительного тестирования.
Раскрытие возможностей визуального сравнения
Визуальное сравнительное тестирование с Playwright и TypeScript открывает целый мир возможностей. Вы можете проводить визуальное сравнение на разных уровнях, чтобы зафиксировать и проанализировать потенциальные визуальные несоответствия:
Сравнение страниц:
Делая снимки экрана целых веб-страниц, вы можете легко определить любые неожиданные визуальные изменения, вызванные изменениями кода. Рассмотрим следующий фрагмент кода, который инкапсулирует этот подход:
test("Page compare", async ({ page }) => {
await expect(page).toHaveScreenshot(['Login', 'starter.png']);
});Имя скриншота по умолчанию создается автоматически. Однако, если вам нужен больший контроль, вы можете оптимизировать функцию toHaveScreenshot или toMatchSnapshot, передав параметр массива. Здесь «Login» относится к имени папки, созданной в рамках определенного теста.
Сравнение текста или изображения:
Погрузитесь глубже в пользовательский интерфейс, сравнивая определенный текстовый контент или изображения внутри элементов. Следующий код демонстрирует, как этого можно добиться:
test('Text content compare', async ({ page }) => {
expect(await page.textContent('p[class="intro-subtitle"]')).toMatchSnapshot(['Login','hero.txt'])
});Сравнение элементов:
Иногда крайне важно сосредоточиться на конкретных элементах пользовательского интерфейса. Вот как вы можете сравнить элементы, как профессионал:
test('Element compare', async ({ page }) => {
expect(await page.locator('div[class="starter-logo-box"]').screenshot()).toMatchSnapshot(['Login', 'ncsclogo.png']);
});Укрощение пиксельных различий
Чтобы учесть незначительные визуальные несоответствия из-за различных факторов, вы можете настроить разницу в пикселях в конфигурационном файле Playwright или на тестовом уровне:
В конфигурационном файле драматурга:
expect: {
toHaveScreenshot: { maxDiffPixels: 500 },
toMatchSnapshot: { maxDiffPixels: 500 },
}На тестовом уровне:
await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });Проблемы и интеграция CI
Однако при выполнении тестов на разных платформах и в средах непрерывной интеграции (CI) возникает проблема. Соглашения об именах снимков могут различаться, что приводит к несоответствиям. Например, при локальном запуске тестов имя снимка может выглядеть как example-test-1-chromium-darwin.png. Но если вы передадите имя моментального снимка как «Image», на компьютере с Windows оно может стать Image-win32.png.
При выполнении тестов через CI в среде Linux несоответствие в именовании снимков может привести к сбоям. Тут на помощь приходит Докер. Контейнеризируя свой код и обеспечивая согласованные соглашения об именах, вы можете полностью избежать этой проблемы.
Однако, если вы решили запускать тесты локально без Docker, существует отличный обходной путь:
Создав фикстуру, которая удаляет суффикс моментального снимка, вы можете добиться унифицированных имен моментальных снимков на всех платформах. Вот как вы можете это реализовать:
_autoSuffix: [
async ({}, use, testInfo) => {
testInfo.snapshotSuffix = `${testInfo.title}`;
await use();
},
{ auto: true },
],Это приспособление изменяет суффикс моментального снимка на основе названия теста, обеспечивая единообразие имен моментальных снимков.
Заключение
Визуальное сравнительное тестирование с Playwright и TypeScript — это мощный подход к поддержанию визуальной целостности ваших веб-приложений. Вооружившись возможностью сравнивать целые страницы, определенные элементы, а также текст или изображения, вы сможете точно обнаруживать визуальные несоответствия. Настраивая различия в пикселях и решая такие проблемы, как присвоение имен снимкам, вы прокладываете путь к более надежным и надежным методам автоматизированного тестирования.
