微軟出品自動化神器【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("http://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智慧嗎？有興趣的小夥伴可以自己嘗試。