1. Введение

В предыдущей статье брат Хонг объяснил и поделился, что для того, чтобы четко видеть этапы автоматического тестирования, вы можете четко видеть этапы выполнения, добавляя цвета выделения с помощью JavaScript. В процессе изучения и практики Playwright я случайно обнаружил, что использование метода Highlight() в Playwright также выделяет веб-элементы. Он отличается от предыдущего метода. И это просто. Метод выделения() может выделять веб-элементы для облегчения отладки и визуальных операций.

2. Тестовый сценарий

Когда мы выполняем автоматическое тестирование в нашей повседневной работе, мы иногда сталкиваемся с выражением позиционирования, которое может одновременно находить несколько элементов. Более того, некоторые элементы являются невидимыми. Это не только приводит к тому, что наши тестовые примеры выполняются с ошибками и возникают трудности с обнаружением проблем. особенно скрытые элементы. Так как же нам сделать так, чтобы все элементы, которые мы находим, более интуитивно отображались перед нами при отладке позиционирования? Selenium требует, чтобы мы просматривали их один за другим, в то время как драматург напрямую предоставляет метод выделения для выделения элементов на веб-странице.

3. Выделите позиционированный элемент

Когда мы отлаживаем позиционирование элемента, мы не знаем, сколько таких элементов на странице, и не знаем, где именно этот элемент отображается на странице. В это время мы можем использовать locator.highlight(). Синтаксис следующий:

locator.highlight()   

4.Выделите реальный бой

4.1highlight выделяет один элемент

В качестве примера возьмем домашнюю страницу Du Niang: выделите окно поиска Baidu (идентификатор элемента поля поиска — kw).

4.1.1 Разработка кода

4.1.2 Справочный код

# coding=utf-8🔥

# 1. Сначала установите кодировку UTF-8, которая поддерживает китайский и английский языки, как указано выше, обычно они располагаются в первой строке.

# 2. Примечания: включая время создания записи, автора и название проекта.
'''
Created on 2023-11-21
@author: Пекин-Хонге
Публичный аккаунт: Пекин Хунге
Project: Первый взгляд на серию «Последний выпуск» — Python+автоматизация драматургаtest-35-highlight() Метод отслеживания позиционирования
'''

# 3. Импортировать модули
from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:

    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://www.baidu.com/")
    page.locator("#kw").highlight()
    page.wait_for_timeout(2000)
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

4.1.3 Запуск кода

1. Запустите код, щелкните правой кнопкой мыши «Выполнить тест», и вывод консоли будет таким, как показано ниже:

2. Действия браузера на компьютере после запуска кода. Как показано ниже:

4.2highlight выделяет несколько элементов

В качестве примера возьмем домашнюю страницу Du Niang.：Выделите новости Baidu（Текст элемента новости<новости>）。

4.2.1 Разработка кода

4.2.2 Справочный код

# coding=utf-8🔥

# 1. Сначала установите кодировку UTF-8, которая поддерживает китайский и английский языки, как указано выше, обычно они располагаются в первой строке.

# 2. Примечания: включая время создания записи, автора и название проекта.
'''
Created on 2023-11-21
@author: Пекин-Хонге
Публичный аккаунт: Пекин Хунге
Project: Первый взгляд на серию «Последний выпуск» — Python+автоматизация драматургаtest-35-highlight() Метод отслеживания позиционирования
'''

# 3. Импортировать модули
from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:

    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://www.baidu.com/")
    page.get_by_text("Новости").highlight()
    page.wait_for_timeout(10000)
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

4.2.3 Запуск кода

1. Запустите код, щелкните правой кнопкой мыши «Выполнить тест», и вывод консоли будет таким, как показано ниже:

2. Действия браузера на компьютере после запуска кода. Как показано ниже:

Удобен ли для нас описанный выше метод, объясненный и распространенный братом Хонгом, для отладки позиционирования элементов?

4.3 Сопоставление элементов — nth

Возвращает локатор n-го элемента. Индексы начинаются с 0. nth(0) означает выбор первого элемента. Синтаксис следующий:

banana = page.get_by_role("listitem").nth(2)

4.3.1-я практическая демонстрация

Мы по-прежнему используем приведенный выше пример для поиска и нажатия на новости. После предыдущей отладки позиционирования мы обязательно найдем первые новости.

4.3.1.1 Разработка кода

4.3.1.2 Справочный код

# coding=utf-8🔥

# 1. Сначала установите кодировку UTF-8, которая поддерживает китайский и английский языки, как указано выше, обычно они располагаются в первой строке.

# 2. Примечания: включая время создания записи, автора и название проекта.
'''
Created on 2023-11-21
@author: Пекин-Хонге
Публичный аккаунт: Пекин Хунге
Project: Первый взгляд на серию «Последний выпуск» — Python+автоматизация драматургаtest-35-highlight() Метод отслеживания позиционирования
'''

# 3. Импортировать модули
from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:

    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://www.baidu.com/")
    news = page.get_by_text("Новости").nth(0).click()
    page.wait_for_timeout(1000)
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

4.3.1.3 Выполняемый код

1. Запустите код, щелкните правой кнопкой мыши «Выполнить тест», и вывод консоли будет таким, как показано ниже:

2. Действия браузера на компьютере после запуска кода. Как показано ниже:

5. Резюме

Сегодня мы в основном объясняем и представляем использование метода подсветки() на этапе отладки кода для выделения элементов, что помогает нам определить, есть ли проблемы с кодом отладки. Гибкое использование подсветки может повысить эффективность нашей работы! Хорошо, уже поздно, поэтому я поделюсь этим здесь сегодня. Спасибо всем за ваше терпение при чтении! ! !

6.Расширение

6.1 Сопоставление элементов - first&last

Точно так же, как и nth, first соответствует первому, а last соответствует последнему.

первый эквивалентен nth(0)

последний эквивалентен nth(-1)

Использование такое же, как nth

6.2 Список кодов

def nth_news(self):
    # Найдите вторую новость и выделите элемент.
    self.page.get_by_text("новости").nth(1).click()    # Используйте first, чтобы найти первый
    self.page.get_by_text("Новости").first.click()
    # Используйте последний, чтобы найти последний
    self.page.get_by_text("Новости").last.click()

Я участвую в последнем конкурсе эссе для специального учебного лагеря Tencent Technology Creation 2024. Приходите и разделите со мной приз!