Драматург с машинописным текстом, разница между locator.click() и page.click()

Читая документацию, я обнаружил, что использование функции click() элемента page не рекомендуется, как мы видим здесь.

Вместо этого мы можем использовать метод locator.click(), как показано здесь.

Мне интересно понять, есть ли какая-то техническая разница между этими двумя методами, и если да, то в чем именно эта разница.

Недавно я обновляю кучу старых функций, созданных год назад или около того, и по некоторым причинам, когда меняю, например

await this.page.click('.add-card') с await this.page.locator('.add-card').click()

поведение меняется, и некоторые элементы больше не ждут; поэтому тест не пройден. Я почти уверен, что мне нужно изменить остальную часть кода, прежде чем пытаться запустить все снова, поскольку я думаю, что проблема связана не с этим изменением, а с наличием различных старых функций. Но тем не менее мне интересно лучше понять, меняется ли что-то в функции click, или вообще ничего не меняется.

Поможет ли вам статья ?

Klim Bim 18.06.2024 10:11

Спасибо! В каком-то смысле это интересно, однако предложение использовать await page.$() не очень полезно, так как это тоже не рекомендуется ( playwright.dev/docs/api/class-page#page-query-selector ), но это уже шаг вперед впереди для меня

Don Diego 18.06.2024 11:49

да, не полагайтесь на $, $$ и .$eval, они устарели. Вам следует использовать locator() или getBy....().

Klim Bim 18.06.2024 13:06

@KlimBim Спасибо за ресурс, но мне эта статья кажется не очень хорошей, поскольку она предлагает всевозможные устаревшие методы, такие как page.$. Тем не менее, это действительно хороший момент в отношении строгости.

ggorlen 18.06.2024 16:33

@ggorlen, ты прав, извини. Интересна была бы только часть «Зачем использовать locator.click() вместо page.click()».

Klim Bim 18.06.2024 16:51
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
5
160
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

page.click() выполняет автоматическое ожидание, так что это не имеет значения. Я могу предложить ряд причин отдать предпочтение локаторам:

  1. Строгость. page.click() по умолчанию не обеспечивает строгости, поэтому, если на странице два элемента, он без ошибки щелкнет первый, тогда как locator.click() выдаст ошибку, если есть какая-либо двусмысленность. Это позволяет избежать регрессий и помогает гарантировать, что обнаруженный вами элемент останется стабильным.
  2. Последовательность и простота. Если вы всегда используете операции на основе локатора, ваш код будет единообразен для чтения. Обычно я делаю вид, что операций page.action() не существует, что приводит к созданию согласованных наборов тестов, которые в основном состоят из getByRole и нескольких других ключевых методов. У Playwright довольно обширный и сложный API, поэтому все, что вы можете сделать, чтобы запретить часть его методов, — это хорошо.
  3. Разделение интересов. Разделение локаторов (то, чего вы не ждете) и действий (то, что вы ожидаете) обеспечивает возможность повторного использования локаторов и способствует написанию Объектных моделей страниц, канонического способа организации локаторов и действий по отношению к конкретной странице. посмотреть на сайте. При использовании page.click() вам придется перезаписывать строку селектора (или использовать строковую константу) при каждом вызове, что наносит ущерб возможности повторного использования. С помощью локаторов вы можете объявить локатор один раз в конструкторе POM, а затем со временем выполнять с ним множество различных действий.
  4. У того, чтобы видеть page.locator(selector).action(options) снова и снова в разных формах, есть определенный ритм, не нарушаемый идиомой page.action(selector, options). Некоторые пользователи Playwright не понимают, где расположены параметры, и, возможно, не используют TypeScript, поэтому последовательное соблюдение второго шаблона может улучшить ясность.
  5. API локатора — это нечто большее, чем просто page.locator(). Другими локаторами являются page.getByRole(), page.getByLabel(), page.getByText() и подобные методы, которые обеспечивают видимый пользователю выбор лучших практик. Если вы используете page.click(), вы, скорее всего, используете CSS или XPath, которые не рекомендуются. API пытается заставить вас использовать page.getByRole(), даже вместо обычного page.locator(), а также page.click(), page.$() и т. д.
  6. Возможность связывания и фильтрации. Драматург предлагает использовать цепочку и фильтрацию с локаторами, но это невозможно с помощью методов page.action(). Отсутствие цепочек может привести к чрезмерному использованию CSS и XPath для устранения неоднозначности выбора.
  7. Локаторы покрывают 100% функциональности нерекомендуемых подходов, поэтому единственная польза от использования page.click() — это экономия нескольких нажатий клавиш.

Вы написали

Недавно я обновляю кучу старых функций, созданных год назад или около того, и по некоторым причинам, когда меняю, например

await this.page.click('.add-card') с await this.page.locator('.add-card').click()

поведение меняется, и некоторые элементы больше не ждут; поэтому тест не пройден.

Это не имеет смысла. locator.click() определенно авто-ожидание, поэтому единственная ошибка, которую я могу себе представить, связана со строгостью (соответствие более чем одному элементу). Чтобы получить помощь, вам нужно будет поделиться минимальным, воспроизводимым примером и полной трассировкой стека или ошибкой утверждения. Распространенной ошибкой является невыполнение await действия локатора, поэтому сначала проверьте это.

спасибо за четкое объяснение, это именно то, что мне нужно! К сожалению, я не могу привести пример, потому что код не зависит от меня (я занимаюсь контролем качества в компании), поэтому я задал этот вопрос, чтобы точно узнать поведение двух функций и попытаться самостоятельно понять, в чем проблема. Вероятно, проблема связана с кодом приложения, а не с тестовым кодом, поэтому мне нужно найти ее и сообщить об этом. Я почти уверен, что проблема в строгости и ошибке видимости пары элементов.

Don Diego 19.06.2024 08:42

Все равно было бы неплохо попытаться создать минимальный пример с нуля. Проблема может быть в чем-то другом, чем вы предполагаете.

ggorlen 19.06.2024 15:31

Другие вопросы по теме