Playwright可以與HTML輸入元素交互，例如文本輸入框、復(fù)選框、單選按鈕、選擇選項(xiàng)、鼠標(biāo)點(diǎn)擊、鍵盤輸入和快捷鍵，以及上傳文件和聚焦元素。

文本輸入

使用locator.fill()是填寫表單字段最簡(jiǎn)單的方法。它將焦點(diǎn)放在元素上，并觸發(fā)輸入事件，輸入文本。它適用于<input>、<textarea>和[contenteditable]元素。

可以使用 get_by_label 方法來定位具有特定標(biāo)簽（即 label 元素）的輸入元素。

通常情況下，一個(gè)標(biāo)簽元素（<label>）會(huì)與一個(gè)表單元素（如輸入框、下拉列表、單選框等）相關(guān)聯(lián)，通過 for 屬性或?qū)⒈韱卧匕跇?biāo)簽內(nèi)部的方式建立關(guān)聯(lián)。這樣，當(dāng)用戶單擊標(biāo)簽時(shí)，關(guān)聯(lián)的表單元素就會(huì)獲得焦點(diǎn)。在自動(dòng)化測(cè)試中，可以使用 get_by_label 方法來查找具有特定標(biāo)簽的表單元素，從而模擬用戶操作。

需要注意的是，使用 get_by_label 方法前提是標(biāo)簽元素和表單元素之間需要正確建立了關(guān)聯(lián)。如果標(biāo)簽元素沒有與表單元素相關(guān)聯(lián)，或者使用了其他方式建立關(guān)聯(lián)（如 aria-labelledby 屬性），則無法使用 get_by_label 方法來查找對(duì)應(yīng)的表單元素。

復(fù)選框和單選按鈕?

使用 locator.set_checked() 是選中和取消選中復(fù)選框或單選按鈕的最簡(jiǎn)單方法。此方法可用于 input[type=checkbox]、input[type=radio] 和 [role=checkbox] 元素。

選擇選項(xiàng)?

使用 locator.select_option() 在 <select> 元素中選擇一個(gè)或多個(gè)選項(xiàng)。您可以指定選項(xiàng)值或標(biāo)簽進(jìn)行選擇?？梢赃x擇多個(gè)選項(xiàng)。

鼠標(biāo)點(diǎn)擊

執(zhí)行簡(jiǎn)單的鼠標(biāo)點(diǎn)擊操作。

在幕后，這個(gè)方法和其他與指針相關(guān)的方法：

• 等待具有給定選擇器的元素出現(xiàn)在DOM中

• 等待它顯示出來，即不為空，沒有 display:none，沒有 visibility:hidden

• 等待它停止移動(dòng)，例如，直到 CSS 轉(zhuǎn)換完成

• 滾動(dòng)元素到視圖中

• 等待它在操作點(diǎn)接收指針事件，例如等到元素不被其他元素遮擋

• 如果在上述任何檢查期間元素被分離，則重試

強(qiáng)制點(diǎn)擊（Forcing the click）

有時(shí)，應(yīng)用程序使用復(fù)雜邏輯，懸停在元素上會(huì)將其覆蓋另一個(gè)攔截點(diǎn)擊的元素。這種行為與元素被覆蓋并將點(diǎn)擊派發(fā)到其他位置的錯(cuò)誤不可區(qū)分。如果您知道正在發(fā)生這種情況，則可以繞過可操作性檢查并強(qiáng)制點(diǎn)擊：

程序化點(diǎn)擊（Programmatic click）

如果您不想在真實(shí)條件下測(cè)試您的應(yīng)用程序，并且想以任何可能的方式模擬點(diǎn)擊，則可以通過使用 locator.dispatch_event() 在元素上觸發(fā) HTMLElement.click() 行為來觸發(fā)點(diǎn)擊事件：

輸入字符?

像真正的鍵盤一樣，逐個(gè)字符地鍵入字段，使用locator.type()。

此方法將發(fā)出所有必要的鍵盤事件，所有的keydown、keyup和keypress事件都會(huì)有。你甚至可以指定可選的按鍵之間的延遲，以模擬真實(shí)的用戶行為。

注意 大多數(shù)時(shí)候，page.fill()只需要正常工作。只有在頁(yè)面上存在特殊的鍵盤處理時(shí)，才需要鍵入字符。

鍵和快捷鍵

locator.press()方法將選定的元素設(shè)置為焦點(diǎn)，并生成一個(gè)單獨(dú)的按鍵。它接受鍵盤事件的keyboardEvent.key屬性中發(fā)出的邏輯鍵名：

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

你也可以指定一個(gè)你想要生成的單個(gè)字符，如"a"或"#"。還支持以下修改快捷鍵：Shift、Control、Alt、Meta。簡(jiǎn)單版本產(chǎn)生一個(gè)單個(gè)字符。這個(gè)字符是大小寫敏感的，所以"a"和"A"會(huì)產(chǎn)生不同的結(jié)果。

支持"Control+o"或"Control+Shift+T"等快捷鍵。當(dāng)與修飾符一起指定時(shí)，修飾符被按下并保持按下狀態(tài)，同時(shí)后續(xù)的鍵被按下。

請(qǐng)注意，你仍然需要指定Shift-A中的大寫A來產(chǎn)生大寫字符。Shift-a會(huì)產(chǎn)生一個(gè)小寫字母，就像你切換了CapsLock一樣。

上傳文件?

你可以使用locator.set_input_files()方法選擇要上傳的輸入文件。它希望第一個(gè)參數(shù)指向類型為"file"的輸入元素?？梢栽跀?shù)組中傳遞多個(gè)文件。如果某些文件路徑是相對(duì)的，它們相對(duì)于當(dāng)前工作目錄解析。空數(shù)組清除所選文件。

如果你沒有手頭上的輸入元素（因?yàn)樗莿?dòng)態(tài)創(chuàng)建的），你可以處理 page.on("filechooser") 事件或者在你的操作上使用相應(yīng)的等待方法：

聚焦元素

對(duì)于處理聚焦事件的動(dòng)態(tài)頁(yè)面，你可以使用 locator.focus() 聚焦到給定的元素。

拖放

你可以使用 locator.drag_to() 執(zhí)行拖放操作。此方法將：

1. 懸停將被拖動(dòng)的元素。

2. 按下鼠標(biāo)左鍵。

3. 將鼠標(biāo)移動(dòng)到將接收拖放的元素上。

4. 釋放鼠標(biāo)左鍵。

手動(dòng)拖放

如果你想精確控制拖放操作，請(qǐng)使用低級(jí)別的方法，如 locator.hover()、mouse.down()、mouse.move() 和 mouse.up()。

注意：

如果你的頁(yè)面依賴于 dragover 事件的觸發(fā)，在所有瀏覽器中都需要至少兩次鼠標(biāo)移動(dòng)才能觸發(fā)它。為了可靠地發(fā)出第二個(gè)鼠標(biāo)移動(dòng)，請(qǐng)將你的 mouse.move() 或 locator.hover() 重復(fù)兩次。操作序列應(yīng)為：懸停拖動(dòng)元素，按下鼠標(biāo)，懸停放置元素，第二次懸停放置元素，釋放鼠標(biāo)。

每天來學(xué)習(xí)

如果覺得有幫助，點(diǎn)個(gè)贊唄