В этой статье мы поговорим о том, что можно проверить у локатора (элемента) и какие вообще есть возможности проверок. Более того, в этой статье я описал упражнения, которые вы можете выполнить и отработать в качестве практики.
И так, начнем...
const { test, expect } = require("@playwright/test");
test("get text", async ({ page }) => {
await page.goto("<https://inzhenerka.tech/>");
const description = await page.locator("[field=descr]").first().textContent();
console.log(description);
});Что еще за first()?
Вы могли заметить, что мы используем у локатора какой-то метод first() перед тем, как запросить текст элемента. Нужно ли его использовать каждый раз, когда я хочу получить текст элемента? Или что будет, если этот метод не вызвать? Объясню.
Дело в том, что, по нашему локатору [field=descr], на странице обнаруживается 4 элемента. Playwright, в таких случаях, выбрасывает ошибку Error: strict mode violation: locator('[field=descr]') resolved to 4 elements. Что переводится примерно как "разберись, че ты хочешь, потом приходи" "по такому локатору определяется 4 элемента". PW не выбирает за нас, с каким элементом работать, а просто останавливается. Хотите выполнения кода – давайте более точные инструкции. Ведь метод textContent() работает только с одним элементом, а тут их больше одного.
Итак, что же делать? Путя всего 2:
- Путя 1й: напишите более точный локатор. И это - хорошая практика. Если у вас есть возомжность, посмотрите, что еще можно написать в локаторе, чтобы точно идентифицировать элемент.
- Путя 2й и последний: объясните PW, какой из найденных элементов нужно выбрать. В нашем случае, мы просим взять первый - first. Кстати, угадайте, какой по порядку элемент мы получим, если напишем не .first(), а .last() ?
Раз уж мы умеем обращаться к первому подходящему и последнему подходящему элементу, возникает вопрос - а что, если я хочу обратиться к 4 из 10 элементов? Да или просто - к третьему и я не знаю, сколько их там будет всего? Здесь у нас есть метод .nth(number), который принимает на вход число - порядковый номер элемента. И да, индексация начинается с 0.
Получается, что nth(1) вернет мне второй по порядку элемент? Ага! А еще получается, что nth(0) – то же самое, что и first()? Ага! Просто "ферст" читается как-то проще, согласны?
Ссылочки на эти методы, если вы их читаете: nth, first и last
`const { test, expect } = require("@playwright/test");
test("get text", async ({ page }) => { await page.goto("https://inzhenerka.tech/");const { test, expect } = require("@playwright/test");
test("get text", async ({ page }) => {
await page.goto("<https://inzhenerka.tech/>");
await expect(page.locator("[field=descr]").first()).toHaveText(
"Помогаем инженерам повысить свою квалификацию на рынке труда и приобрести навыки международного уровня"
);
});await expect(page.locator("")).toHaveText("ожидаемый текст", {
ignoreCase: true,
});<!-- вот у нас есть вот такой список на странице -->
<ul>
<li>Билли</li>
<li>Вилли</li>
<li>Дилли</li>
</ul>// ✓ Вот этот код проверит, что тексты у элементов соответственно равны переданным.
await expect(page.locator("ul > li")).toHaveText(["Билли", "Вилли", "Дилли"]);
// ✖ Вот такая проверка упадет, потому что текстовки идут в другом порядке
await expect(page.locator("ul > li")).toHaveText(["Дилли", "Билли", "Вилли"]);
// ✖ Такой тест тоже упадет, потому что текст одного из элементов не совпадем с ожидаемым
await expect(page.locator("ul > li")).toHaveText([
"Билли",
"Вилли",
"Джонатан?",
]);
// ✖ Вот тут сложнее.
// Тест упадет, потому что локатор собирает не группу элементов (li), а только один (ul).
// Нельзя сравнить текст одного элемента с группой текстов.
await expect(page.locator("ul")).toHaveText(["Text 1", "Text 2", "Text 3"]);