QA-SDET

Playwright — это современный инструмент для автоматизации тестирования веб-приложений. Он поддерживает множество функций, включая автоматизацию браузеров, работу с сетью, файлами и многое другое. Одной из ключевых возможностей Playwright является встроенная поддержка assertions (проверок) через библиотеку expect, которая позволяет легко проверять состояние элементов, страниц и данных.

В этой статье мы подробно рассмотрим, как использовать expect в Playwright для написания надежных и читаемых тестов.

---

Что такое expect?

expect — это функция, которая используется для написания assertions (проверок) в тестах. Она позволяет проверять, соответствует ли фактическое значение ожидаемому. Если проверка не проходит, тест завершается с ошибкой, что помогает быстро выявить проблемы.

Playwright использует библиотеку expect из пакета Jest, что делает её мощным и гибким инструментом для тестирования.

---

Основные методы expect

Вот список наиболее часто используемых методов expect в Playwright:

1. toBe: Проверяет строгое равенство (сравнение по ссылке или значению).
2. toEqual: Проверяет глубокое равенство (сравнение объектов и массивов).
3. toBeTruthy: Проверяет, что значение является «истинным» (true, не null, не undefined, не 0, не пустая строка).
4. toBeFalsy: Проверяет, что значение является «ложным» (false, null, undefined, 0, пустая строка).
5. toContain: Проверяет, что массив или строка содержит определённый элемент или подстроку.
6. toHaveLength: Проверяет длину массива или строки.
7. toMatch: Проверяет, что строка соответствует регулярному выражению.
8. toBeGreaterThan / toBeLessThan: Проверяет, что число больше или меньше определённого значения.
9. toBeCloseTo: Проверяет, что число близко к определённому значению (с учётом погрешности).
10. toHaveText: Проверяет, что элемент содержит определённый текст.
11. toHaveAttribute: Проверяет, что элемент имеет определённый атрибут с заданным значением.
12. toBeVisible: Проверяет, что элемент виден на странице.
13. toBeEnabled / toBeDisabled: Проверяет, что элемент доступен или недоступен для взаимодействия.

---

Примеры использования expect в Playwright

Рассмотрим несколько примеров, как использовать expect в тестах.

1. Проверка текста элемента

const { test, expect } = require('@playwright/test');

test('Проверка текста на странице', async ({ page }) => {
  await page.goto('https://example.com');
  const heading = page.locator('h1');
  await expect(heading).toHaveText('Example Domain');
});

В этом примере мы проверяем, что элемент <h1> содержит текст «Example Domain».

---

2. Проверка видимости элемента

test('Проверка видимости кнопки', async ({ page }) => {
  await page.goto('https://example.com');
  const button = page.locator('button');
  await expect(button).toBeVisible();
});

Здесь мы проверяем, что кнопка видна на странице.

---

3. Проверка атрибута элемента

test('Проверка атрибута ссылки', async ({ page }) => {
  await page.goto('https://example.com');
  const link = page.locator('a');
  await expect(link).toHaveAttribute('href', 'https://www.iana.org/domains/example');
});

В этом примере мы проверяем, что ссылка имеет атрибут href с определённым значением.

---

4. Проверка длины массива

test('Проверка количества элементов списка', async ({ page }) => {
  await page.goto('https://example.com');
  const items = page.locator('ul li');
  await expect(items).toHaveCount(3);
});

Здесь мы проверяем, что список содержит 3 элемента.

---

5. Проверка числового значения

test('Проверка числового значения', async ({ page }) => {
  await page.goto('https://example.com');
  const counter = page.locator('#counter');
  const value = await counter.innerText();
  await expect(Number(value)).toBeGreaterThan(10);
});

В этом примере мы проверяем, что значение счётчика больше 10.

---

6. Проверка с использованием регулярного выражения

test('Проверка текста с использованием регулярного выражения', async ({ page }) => {
  await page.goto('https://example.com');
  const paragraph = page.locator('p');
  await expect(paragraph).toHaveText(/Example Domain/);
});

Здесь мы проверяем, что текст элемента соответствует регулярному выражению.

---

7. Проверка состояния элемента (включён/выключен)

test('Проверка состояния кнопки', async ({ page }) => {
  await page.goto('https://example.com');
  const button = page.locator('button');
  await expect(button).toBeEnabled();
});

В этом примере мы проверяем, что кнопка доступна для взаимодействия.

---

Лучшие практики использования expect

1. Используйте явные проверки:
   • Убедитесь, что проверки точно отражают ожидаемое поведение. Например, вместо toBeTruthy лучше использовать toBe(true), если вы ожидаете конкретное значение.
2. Проверяйте элементы после их загрузки:
   • Убедитесь, что элемент загружен на странице перед выполнением проверки. Используйте await для ожидания.
3. Используйте локаторы:
   • Локаторы (locator) в Playwright позволяют находить элементы на странице. Используйте их для более читаемых и поддерживаемых тестов.
4. Проверяйте несколько аспектов:
   • Если элемент должен соответствовать нескольким условиям (например, текст и видимость), добавьте несколько проверок.
5. Используйте кастомные сообщения об ошибках:
   • Вы можете добавить кастомное сообщение об ошибке, чтобы упростить отладку:javascriptCopyawait expect(element).toHaveText(‘Expected Text’, { message: ‘Текст элемента не совпадает’ });
6. Избегайте избыточных проверок:
   • Не проверяйте то, что уже проверено в других тестах. Это поможет ускорить выполнение тестов.

---

Ошибки и их решение

1. Элемент не найден:
   • Убедитесь, что локатор указан правильно. Используйте DevTools для проверки селекторов.
2. Элемент не загрузился:
   • Добавьте ожидание перед проверкой. Например, используйте await page.waitForSelector().
3. Неправильный текст или атрибут:
   • Проверьте, что текст или атрибут действительно соответствуют ожидаемым значениям. Убедитесь, что данные не изменяются динамически.
4. Тест завершается с ошибкой:
   • Проверьте, что все асинхронные операции завершены перед выполнением проверки.

---

Заключение

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