Работа с disabled и readonly элементами

Когда выполняется автоматизированное тестирование веб-приложений с использованием Playwright, важно учитывать различные атрибуты элементов, такие как disabled и readonly. Эти атрибуты играют ключевую роль в взаимодействии с элементами формы, например, с полями ввода, кнопками и ссылками. Они могут ограничивать возможность взаимодействия с элементом, что делает их особым случаем при написании тестов.

Понимание атрибутов disabled и readonly

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

  • readonly: Атрибут readonly ограничивает изменение значения элемента, но не препятствует его взаимодействию. В отличие от disabled, элемент с атрибутом readonly можно выбрать и скопировать текст, но нельзя изменить его. Этот атрибут часто применяется к полям ввода текста, где данные отображаются, но не могут быть изменены пользователем.

Как работать с disabled и readonly элементами

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

Обработка disabled элементов

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

Пример:

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

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

В этом примере проверяется, что кнопка с атрибутом disabled действительно недоступна для клика. Метод toBeDisabled используется для проверки, что элемент находится в состоянии, когда с ним нельзя взаимодействовать.

Обработка readonly элементов

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

Пример:

test('Проверка поля ввода с атрибутом readonly', async ({ page }) => {
  await page.goto('https://example.com');
  const input = await page.locator('input[readonly]');
  await expect(input).toHaveAttribute('readonly', 'true');
  
  // Проверка невозможности изменения значения
  await input.fill('Новый текст');
  await expect(input).toHaveValue('Исходное значение');  // Значение не изменилось
});

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

Взаимодействие с disabled и readonly элементами

Playwright позволяет выполнять дополнительные проверки для элементов с атрибутами disabled и readonly, даже если они не могут быть изменены.

Для disabled элементов можно использовать метод toBeDisabled или toBeEnabled, чтобы убедиться, что элемент находится в правильном состоянии:

test('Проверка кнопки на disabled', async ({ page }) => {
  const button = await page.locator('button');
  await expect(button).toBeDisabled();  // Проверяем, что кнопка disabled
  await button.click();  // Ожидаем, что кнопка не будет кликнута
});

В случае readonly элементов можно использовать метод toHaveAttribute, чтобы проверить наличие атрибута readonly:

test('Проверка поля ввода с readonly', async ({ page }) => {
  const input = await page.locator('input');
  await expect(input).toHaveAttribute('readonly', 'true');  // Проверка readonly
});

Важные особенности

  1. Не все элементы с атрибутом disabled блокируют доступность: В некоторых случаях браузеры могут позволить выполнение определённых действий с элементами, даже если они имеют атрибут disabled. Например, элементы внутри формы, которая не была отправлена, могут блокировать отправку, но позволять клик на других элементах. Это необходимо учитывать в тестах, особенно при автоматизации сложных форм.

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

  3. Фокусировка на disabled и readonly элементах: Playwright позволяет ставить фокус на элементы, даже если они имеют атрибуты disabled или readonly, что полезно при тестировании интерфейсов с клавиатурным доступом. Однако попытка ввода данных или выполнения действий с ними будет заблокирована.

test('Проверка фокуса на readonly элемент', async ({ page }) => {
  const input = await page.locator('input[readonly]');
  await input.focus();
  await expect(input).toBeFocused();  // Проверка, что элемент в фокусе
});

Применение в реальных проектах

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

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

Оглавление