微軟出品自動化神器【Playwright+Java】系列（五）之常見點擊事件操作

2022 年 10 月 13 日
筆記
Playwright+Java

寫在前面

明天就是周五了，這周有那麼一兩天心情特別不好，真的是做什麼都沒興緻，所以導致整個人都很喪，什麼都不想做。

本打算周一就更新這篇文章的，但由於公司一直加班，每天到家很晚，都是擠時間去學，理解後再輸出到部落格寫出來，所以導致進度就滯後了，真的不是我偷懶，還請一直關注我的小夥伴能夠理解。

常見點擊事件操作

這部分主要演示的常見點擊操作，例如：文本輸入、複選框、單選按鈕、選擇選項、滑鼠點擊事件等等。

1、輸入操作

語法： Locator.fill(value)

使用場景： 文本框、日期/時間、日曆控制項等輸入框

示例程式碼如下：

  /**
     * 輸入操作：
     * 語法：Locator.fill(value)
     * 使用場景：文本框、日期/時間、日曆控制項等輸入框
     */
    @Test
    public void testInput() {
        page.locator("#user").fill("公眾號：軟體測試君");
        String value = page.locator("#user").getAttribute("value");
        //輸出 ==> 公眾號:軟體測試君
        System.out.println(value);
    }

2、點擊操作

語法： Locator.click()

適用場景： 單選框、複選框、按鈕控制項、常見可點擊控制項等等！

示例程式碼如下：

 /**
     * 點擊操作
     * 語法：Locator.click()
     * 適用場景：單選框、複選框、按鈕控制項、常見可點擊控制項等等！
     */
    @Test
    public void testClick() {
        //點擊超鏈接
        page.locator(".baidu").click();
        page.goBack();
        //點擊單選框（RadioBox）
        page.locator(".Volvo").click();
        //點擊複選框（checkbox）
        page.locator("#checkbox [type='checkbox']:nth-child(7)").click();
    }

3、單選框及複選框操作

語法： Locator.setChecked(checked)

適用場景： 單選框、複選框

示例程式碼如下：

  /**
     * 單選框及複選框操作
     * 語法：Locator.setChecked(checked)
     * 適用場景：單選框、複選框
     */
    @Test
    public void testChecked() {
        //單選款 (選中，已選中狀態下無效)
        page.locator(".Volvo").setChecked(true);
        page.locator(".Volvo").check();
        System.out.println(page.locator(".Volvo").isChecked());
        //複選框（選中，已選中狀態下無效）
        page.locator("#checkbox [type='checkbox']:nth-child(7)").check();
        page.locator("#checkbox [type='checkbox']:nth-child(7)").setChecked(true);
        System.out.println(page.locator("#checkbox [type='checkbox']:nth-child(7)").isChecked());
    }

4、下拉控制項操作

語法： Locator.selectOption(values[, options])

適用場景： 下拉框操作

示例程式碼如下：

  /**
     * 下拉控制項操作
     * 語法：Locator.selectOption(values[, options])
     * 適用場景：下拉框操作
     */
    @Test
    public void testSelectOption() {
        //通過value值選擇
        page.locator("[name='select']").selectOption("opel");
        //通過可見文本選擇
        page.locator("[name='select']").selectOption(new SelectOption().setLabel("Audi"));
        // 多選無效，只能選中第一個（saab）
        //page.locator("[name='select']").selectOption(new String[] {"saab", "opel"});
    }

5、滑鼠事件

語法： 詳見案例

適用場景：常見滑鼠點擊事件

案例如圖：

示例程式碼如下：

/**
     * 滑鼠事件
     * 語法：詳見案例
     * 適用場景：
     */
    @Test
    public void testMouse() {
        page.navigate("//localhost:8080/mouse.html");
        //常規單擊
        page.locator("#mouse2").click();
        pause(3);
        //雙擊
        page.locator("#mouse3").dblclick();
        pause(3);
        //右鍵單擊
        page.locator("#mouse5").click(new Locator.ClickOptions().setButton(MouseButton.RIGHT));
        pause(3);
        //按住Shift鍵並單擊
        page.locator("#mouse2").click(new Locator.ClickOptions().setModifiers(Arrays.asList(KeyboardModifier.SHIFT)));
        pause(3);
        //懸停在元素上
        page.locator("#mouse1").hover();
        pause(3);
        //單擊左上角
        page.locator("#mouse1").click(new Locator.ClickOptions().setPosition(0, 0));
        pause(3);
        //強制點擊
        page.locator("#mouse2").click(new Locator.ClickOptions().setForce(true));
        pause(3);
        //調度點擊事件來觸發點擊
        page.locator("#mouse2").dispatchEvent("click");
    }

注意：不知道是什麼原因，在執行滑鼠點擊案例時，程式從上到下操作後會發現彈窗會自己點擊關掉，神奇的很！

寫到最後

對比學習看的話，Selenium操作點擊後的彈窗需要alert來完成確認，而Playwright卻可以自動點擊，可以說比Selenium智慧嗎？有興趣的小夥伴可以自己嘗試。

Tags: Playwright+Java