Dramatiker für Python: grundlegende Verwendung

schreibe vorne

Playwright für Python: Installation und erste Verwendung

Playwright kann mit HTML-Eingabeelementen wie Texteingabefeldern, Kontrollkästchen, Optionsfeldern, Dropdown-Optionen usw. interagieren. Es kann Mausklicks simulieren, Zeichen, Tastenanschläge und Verknüpfungen eingeben sowie Dateien hochladen und den Fokus auf Elemente setzen.

Hinweis: In diesem Artikel wird nur die synchrone Methode erläutert, nicht die asynchrone Methode.
from playwright.sync_api import sync_playwright

1. TexteingabeTexteingabe

Mit locator.fill()ist der einfachste Weg, die Formularfelder auszufüllen. Es setzt den Fokus auf das Element und löst ein Eingabeereignis mit dem Eingabetext aus. Es funktioniert mit den Elementen <input>, <textarea>und .[contenteditable]

# 文本输入框
page.get_by_role("textbox").fill("Peter")

# 日期输入框
page.get_by_label("Birth date").fill("2020-02-02")

# 时间输入框
page.get_by_label("Appointment time").fill("13:15")

# 当地时间输入框
page.get_by_label("Local time").fill("2020-03-02T05:15")

2. Kontrollkästchen und Optionsfelder

Mit locator.set_checked()ist die einfachste Möglichkeit, ein Kontrollkästchen oder Optionsfeld zu aktivieren oder zu deaktivieren. input[type=checkbox]Diese Methode ist für die Elemente , input[type=radio]und verfügbar .[role=checkbox]

# 勾选checkbox
page.get_by_label('I agree to the terms above').check()

# 断言checkbox被选中了
assert page.get_by_label('Subscribe to newsletter').is_checked() is True

# 选中单选框
page.get_by_label('XL').check()

3. Dropdown-Auswahlfeld Optionen auswählen

Verwenden Sie diese Option, um eine oder mehrere Optionen innerhalb eines Elements auszuwählen locator.select_option(). <select>Sie können eine Auswahl treffen, indem Sie den Wert oder die Bezeichnung einer Option angeben. Es können mehrere Optionen gleichzeitig ausgewählt werden.

# 单选，选中value
page.get_by_label('Choose a color').select_option('blue')

# 单选，选中label
page.get_by_label('Choose a color').select_option(label='Blue')

# 多选
page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])

4. MausklickMausklick

# 通用点击
page.get_by_role("button").click()

# 双击
page.get_by_text("Item").dblclick()

# 右击
page.get_by_text("Item").click(button="right")

# Shift + click
page.get_by_text("Item").click(modifiers=["Shift"])

# 鼠标悬浮在元素上
page.get_by_text("Item").hover()

# 点击左上角
page.get_by_text("Item").click(position={
    
     "x": 0, "y": 0})

# 强制点击
page.get_by_role("button").click(force=True)

# Programmatic click
page.get_by_role("button").dispatch_event('click')

5. Zeichen eingeben. Geben Sie Zeichen ein

In den meisten Fällen sollten Sie locator.fill()Methoden zur Texteingabe verwenden. Bitte beachten Sie den Abschnitt zur Texteingabe oben. Eine manuelle Eingabe von Zeichen ist nur dann erforderlich, wenn auf der Seite eine spezielle Tastaturbedienung vorhanden ist.

# 通过class定位，输入Hello World!
page.locator('#area').type('Hello World!')

7. Tasten und Verknüpfungen

# 点击 Enter
page.get_by_text("Submit").press("Enter")

# 发送 Control+Right组合键
page.get_by_role("textbox").press("Control+ArrowRight")

# 键盘按 “$”符号
page.get_by_role("textbox").press("$")

locator.press()Die Methode legt den Fokus auf das ausgewählte Element und erzeugt einen einzelnen Tastendruck. Es akzeptiert keyboardEvent.keyden logischen Tastennamen, der in den Eigenschaften des Tastaturereignisses ausgegeben wird:

Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape,
ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight,
ArrowUp, F1 - F12, Digit0 - Digit9, KeyA - KeyZ, etc.

Sie können auch ein einzelnes Zeichen wie „a“ oder „#“ angeben, um die entsprechende Tasteneingabe zu generieren.
Die folgenden Sondertastenkürzel werden ebenfalls unterstützt: Umschalt, Strg, Alt, Meta.
Kleinbuchstabe „a“ und Großbuchstabe „A“ sind unterschiedliche Operationen.

# <input id=name>
page.locator('#name').press('Shift+A')

# <input id=name>
page.locator('#name').press('Shift+ArrowLeft')

Auch Tastenkombinationen wie „Strg+o“ oder „Strg+Umschalt+T“ werden unterstützt. Wenn eine Zusatztaste verwendet wird, wird die Zusatztaste gedrückt und gehalten und funktioniert auch, wenn die nachfolgende Taste gedrückt wird.
Beachten Sie, dass Sie, wenn Sie ein großes A wünschen, trotzdem Shift-A angeben müssen. Shift-a erzeugt einen Kleinbuchstaben, als ob Sie CapsLock aktiviert hätten.

8. Dateien hochladen Dateien hochladen

Sie können die Methode locator.set_input_files() verwenden, um Eingabedateien zum Hochladen auszuwählen. Sein erster Parameter sollte auf ein Eingabeelement mit dem „type“-Attribut „file“ verweisen. In einem Array können mehrere Dateien übergeben werden. Wenn einige Dateipfade relativ sind, werden sie relativ zum aktuellen Arbeitsverzeichnis aufgelöst. Wenn ein leeres Array übergeben wird, werden die ausgewählten Dateien gelöscht.

# 上传单个文件
page.get_by_label("Upload file").set_input_files('myfile.pdf')

# 上传多个文件
page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt'])

# 移除所有的文件
page.get_by_label("Upload file").set_input_files([])

# 从内存上传缓存区
page.get_by_label("Upload file").set_input_files(
    files=[
        {
    
    "name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"}
    ],
)

Wenn Sie das Eingabeelement nicht manuell abrufen (da es dynamisch erstellt wird), können Sie dies tun, indem Sie das Ereignis page.on("filechooser") verarbeiten oder die entsprechende Wartemethode verwenden:

with page.expect_file_chooser() as fc_info:
    page.get_by_label("Upload file").click()
file_chooser = fc_info.value
file_chooser.set_files("myfile.pdf")

9. Fokuselement

Bei dynamischen Seiten, die Fokusereignisse verarbeiten, können Sie locator.focus()Funktionen verwenden, um ein bestimmtes Element zu fokussieren.

page.get_by_label('password').focus()

10. Ziehen und ablegen

Sie können Drag-and-Drop-Vorgänge mit der Methode locator.drag_to() durchführen. Diese Methode wird:

Bewegen Sie den Mauszeiger über das Element, das Sie ziehen möchten.
Drücken Sie die linke Maustaste.
Bewegen Sie die Maus über das Element, das Drag & Drop erhält.
Lassen Sie die linke Maustaste los.

page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at"))

Wenn Sie das Ziehen präzise steuern möchten, können Sie untergeordnete Methoden wie locator.hover(), und verwenden .mouse.down()mouse.move()mouse.up()

page.locator("#item-to-be-dragged").hover()
page.mouse.down()
page.locator("#item-to-drop-at").hover()
page.mouse.up()

Hinweis: Wenn Ihre Seite auf das Auslösen des Dragover-Ereignisses angewiesen ist, müssen Sie in allen Browsern mindestens zwei Mausbewegungen ausführen, um das Ereignis auszulösen. Um eine zweite Mausbewegung zuverlässig durchzuführen, müssen Sie „mouse.move()“ oder „locator.hover()“ zweimal wiederholen. Die Reihenfolge der Vorgänge ist wie folgt: Bewegen Sie den Mauszeiger über das gezogene Element, drücken Sie die Maus, bewegen Sie den Mauszeiger über das abgelegte Element, bewegen Sie den Mauszeiger erneut über das abgelegte Element, lassen Sie die Maus los.