Angular Academy · Урок

Селекторы и проверки

Находите элементы и проверяйте состояние

«Селекторы и проверки» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Хорошие селекторы делают тесты стабильными

От способа поиска элементов зависит надежность тестов. Селекторы, привязанные к CSS-классам или структуре DOM, ломаются при каждом изменении дизайна. Семантические локаторы, ориентированные на пользователя, переживают переработку кода, поскольку отражают то, что действительно воспринимают пользователи.

getByRole: предпочтительный локатор

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

page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });

getByLabel и getByPlaceholder

Для полей формы выполняйте поиск по связанному с ними названию или заполнителю — именно так пользователь их идентифицирует.

page.getByLabel('Email address');
page.getByPlaceholder('Search products');

getByText и getByTestId

getByText сопоставляет видимый текст. Если семантической ссылки нет, используйте getByTestId, который считывает добавленный намеренно атрибут data-testid.

page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">

Избегайте хрупких CSS-селекторов

Вы по-прежнему можете использовать page.locator('.css-selector'), но оставьте этот вариант на крайний случай. Имена классов и вложенность часто меняются, а роли и названия — редко.

// Fragile, avoid when possible:
page.locator('div.row > button.primary');

Проверки с учетом состояния страницы

Оператор expect Playwright для локаторов работает по принципу сначала веб: он автоматически повторяет проверку, пока условие не выполнится или не истечет время ожидания. Это ключ к проверкам без нестабильных сбоев.

await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();

Распространенные средства сопоставления при проверке

Средство сопоставления описывает ожидаемое состояние элемента или страницы.

await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);

Проверка количества элементов в списках

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

const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');

Отрицательные проверки

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

await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();

Фильтрация и объединение локаторов

Уточняйте локатор с помощью filter или объединяйте локаторы в цепочку, чтобы ограничить поиск родительским элементом и сделать проверки точными.

const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();

Почему проверки с учетом страницы лучше ручного опроса

Такие проверки повторяют все выражение целиком, а не просто перечитывают устаревший снимок. Поэтому await expect(loc).toHaveText('Done') ждет появления текста и устраняет состояния гонки, характерные для написанных вручную ожиданий.

Быстрая проверка

Выберите наиболее устойчивый локатор.

Итоги

Предпочитайте семантические локаторы: getByRole, getByLabel, getByText, а getByTestId используйте как запасной вариант. Применяйте средства сопоставления с учетом состояния страницы (toBeVisible, toHaveText, toHaveCount, toHaveURL), которые повторяют проверки автоматически, а также используйте .not и filter, чтобы сохранять точность.

Часто задаваемые вопросы

Урок «Селекторы и проверки» бесплатный?

Да — полный текст урока «Селекторы и проверки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Селекторы и проверки»?

Находите элементы и проверяйте состояние Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Селекторы и проверки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

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

Все уроки этого курса

← Назад к Angular Academy