Playwright for Python: 基本的な使用法

前に書く

Playwright for Python: インストールと初期使用

自動通信

Playwright は、テキスト入力ボックス、チェックボックス、ラジオ ボタン、ドロップダウン オプションなどの HTML 入力要素を操作できます。マウスのクリック、文字の入力、キーストローク、ショートカットをシミュレートできるだけでなく、ファイルをアップロードして要素にフォーカスを設定することもできます。

注: この記事では同期方式についてのみ説明し、非同期方式については説明しません。
from playwright.sync_api import sync_playwright

1.テキスト入力テキスト入力

を使用するのが、locator.fill()フォームフィールドに入力する最も簡単な方法です。要素にフォーカスを設定し、入力テキストを含む入力イベントを起動します。<input>、<textarea>および要素で動作します[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. チェックボックスとラジオボタン

を使用するのがlocator.set_checked()、チェックボックスまたはラジオ ボタンを選択または選択解除する最も簡単な方法です。このメソッドはinput[type=checkbox]、input[type=radio]および[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. ドロップダウン選択ボックス オプションを選択します

要素内の 1 つ以上のオプションを選択するために使用しますlocator.select_option()。<select>オプションの値またはラベルを指定することで選択できます。複数のオプションを同時に選択できます。

# 单选，选中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. マウスクリックマウスクリック

# 通用点击
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. 文字を入力する 文字を入力する

ほとんどの場合、locator.fill()テキストを入力するにはメソッドを使用する必要があります。上記のテキスト入力セクションを参照してください。文字の手動入力は、ページに特別なキーボード処理が存在する場合にのみ必要です。

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

7. キーとショートカット

# 点击 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()このメソッドは、選択した要素にフォーカスを置き、単一のキーストロークを生成します。keyboardEvent.keyキーボード イベントのプロパティで出力された論理キー名を受け入れます。

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

• 「a」や「#」などの 1 文字を指定して、対応するキー入力を生成することもできます。
• 次の修飾キー ショートカットもサポートされています: Shift、Control、Alt、Meta。
• 小文字の「a」と大文字の「A」は異なる演算です。

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

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

• 「Control+o」や「Control+Shift+T」などのショートカットもサポートされています。修飾キーを使用する場合は、修飾キーを押したままにし、次のキーを押したときにも機能します。

• 大文字の A が必要な場合でも、Shift+A を指定する必要があることに注意してください。Shift-a を押すと、CapsLock がオンになっているかのように小文字が生成されます。

8. ファイルをアップロードする ファイルをアップロードする

locator.set_input_files() メソッドを使用して、アップロードする入力ファイルを選択できます。その最初のパラメータは、「file」の「type」属性を持つ入力要素を指す必要があります。複数のファイルを配列で渡すことができます。一部のファイル パスが相対パスである場合、それらは現在の作業ディレクトリを基準にして解決されます。空の配列が渡された場合、選択されたファイルはクリアされます。

# 上传单个文件
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"}
    ],
)

input 要素を手動で取得しない場合 (動的に作成されるため)、page.on("filechooser") イベントを処理するか、対応する wait メソッドを使用することで取得できます。

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. フォーカス要素

locator.focus()フォーカス イベントを処理する動的ページの場合、関数を使用して特定の要素にフォーカスを当てることができます。

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

10. ドラッグアンドドロップ

locator.drag_to() メソッドを使用して、ドラッグ アンド ドロップ操作を実行できます。このメソッドは次のことを行います。

• ドラッグする要素の上にマウスを置きます。
• マウスの左ボタンを押します。
• ドラッグ アンド ドロップを受け取る要素の上にマウスを移動します。
• マウスの左ボタンを放します。

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

locator.hover()ドラッグを正確に制御したい場合は、 、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()

注: ページがドラッグオーバー イベントのトリガーに依存している場合、すべてのブラウザーでイベントをトリガーするには、少なくとも 2 回マウスを動かす必要があります。2 回目のマウス移動を確実に実行するには、mouse.move() または locator.hover() を 2 回繰り返す必要があります。操作の順序は次のとおりです。ドラッグされた要素の上にカーソルを置き、マウスを押し、ドロップされた要素の上にカーソルを置き、ドロップされた要素に再度カーソルを置き、マウスを放します。