Playwright Actions: Input, Mouse, Keyboard. Advanced JavaScript Web Automation Course. Lesson 8

[@IlarionHalushka]

I strongly suggest you to go over the docs all try all the methods yourself.
You have to know what actions you can perform on the elements and when the time comes you can easily get back to the docs and find what you need.
playwright.dev/docs/input
playwright.dev/docs/api/class-keyboard
playwright.dev/docs/api/class-mouse
playwright.dev/docs/api/class-locator
Happy reading ;)

[@__Name_It__]

THANK YOU!

[@IlarionHalushka]

🤜thank you!

[@vasylvonshpyra4848]

Друже, зроби щось із своєю рекламою її дуже багато, кожні 4+ хвилини, і вона гучніша за озвучення відео. Звичайно я не проти, щоб ти заробляв на своєму курсі. Вирівняй хоча б звук, бо слухаю тебе на максимум, і кожні 4+ хвилин реклама як заверещить, просто кров з вух. Курс супер-цікавий, слухаю уважно, як бачиш до 8-го відео дійшов, а це вже непогано. Багато повторюю на своєму проекті. Дякую.

[@IlarionHalushka]

я сам хейчу тих, хто не вирівнює звук на відосах... дякую!!
до 8-го відоса це рівень 💪
якщо будуть ще пропозиції чи зауваження, то напиши пліз

[@vasylvonshpyra4848]

@@IlarionHalushka 🤝

[@klimtro]

Like for your work

[@IlarionHalushka]

like for your like :)

[@user-lq7jv1do8s]

Шеф, у меня вопрос. Как выявить видимый элемент на странице, если у него нет атрибута визибилити? Через ассертЗэт не катит - мне нужна не проверка, а поиск видимого для клика.

[@IlarionHalushka]

Спасибо за вопрос, но вопрос не понял))
playwright делает клик только по видимым элементам. По дефолту если не проставлено у элемента display: none, visibility: hidden , то он будет видимым на странице.
А если элемент на странице невидимый (например другой элемент его перекрывает), но все равно нужно по этому элементу кликнуть, то { force: true } вторым аргументом в функцию click проставляй.
playwright.dev/docs/input#mouse-click
из документации:
Under the hood, this and other pointer-related methods:
* wait for it to become displayed, i.e. not empty, no display:none, no visibility:hidden
* ...

[@IlarionHalushka]

Или уточни вопрос, может даже куск html скинь что у тебя там за элемент и что не так)

[@user-lq7jv1do8s]

@@IlarionHalushka там карусель с карточками. на каждой карточке фотка, кнопка и ссыль. И большая часть карточек скрыта. Но плэйрайт мне говорит, что все видимые. А мне, по условиям теста, нужно клацнуть именно на видимый. Атрибутов таких у меня не указано.

[@user-lq7jv1do8s]

@@IlarionHalushka можно, конечно, через метровый xpath выйти на такой элемент, но как-то хотелось поизящней. А весь гугл и ютуб исключительно копипастит оф доку

[@IlarionHalushka]

​@@user-lq7jv1do8s 1) ну смотри, самый простой вариант для тебя будет это найти селектор этих слайдов и использовать методы:
.first().click
.last().click
.nth(1).click
7 лекция где-то 52я минута, показываю Locator Strictness и эти методы. Пример:
await page.locator(".post-lists a").first().click();
2) Еще есть более продвинутый вариант - использовать toBeInViewport ассерт. Например у тебя есть 10 ссылок на странице, из них видно только 4. Допустим ты хочешь сделать клики только на видимые на странице ссылки. Нужно получить все (.all()) ссылки; итерировать по массиву; для каждой ссылки проверить видима ли она на странице (.toBeInViewport()) и кликнуть на нее. Если ссылка не видима на странице и expect...toBeInViewport бросает ошибку, то ошибка просто игнорируется (отлавливается в catch).
Дополнительно желательно использовать переменную successfulClicksCount для того, чтобы убедиться, что хотя бы одна ссылка была кликнута - await expect(successfulClicksCount).toBeGreaterThan(0)
Код теста:
import { test, expect } from "@playwright/test";
test("blog click only on visible (toBeInViewport) articles", async ({ page }) => {
await page.goto("ilarionhalushka.github.io/");
const articles = await page.locator(".posts-list a").all();
let successfulClicksCount = 0;
// playwright iterates over the array of articles and clicks only on visible ones
for (const article of articles) {
try {
await expect(article).toBeInViewport();
await article.click();
successfulClicksCount += 1;
} catch {}
}
await expect(successfulClicksCount).toBeGreaterThan(0);
});