技術分享 | web自動化測試-執行 JavaScript 指令碼

阿新 • • 發佈：2022-05-16

原文連結

在頁面上直接執行 js
在某個已經定位的元素上執行 js

執行js

Selenium 可以通過 execute_script() 來執行 JavaScript 指令碼。

driver.execute_script：同步執行 JavaScript 在當前的視窗框架下
js 指令碼可以在瀏覽器的開發者工具 -> Console 中進行除錯

js的返回結果

獲取元素控制元件中的屬性值

與 Selenium 結合，在程式碼中返回 js 結果
Python 版本

# 獲取網頁效能的響應時間，js指令碼中使用return代表返回獲取的結果
js = "return JSON.stringify(performance.timing);"
driver.execute_script(js)

Java 版本

// 獲取網頁效能的響應時間，js指令碼中使用return代表返回獲取的結果
String js = "return JSON.stringify(performance.timing);";
JavascriptExecutor j = (JavascriptExecutor) driver;
j.executeScript(js);

arguments傳參

執行 JavaScript 也可以通過傳參的方式傳入元素資訊，還可以通過下面的方法點選被遮擋的元素。

例如：某個元素在實際的操作過程中被其他的元素遮擋，就可以使用 js 點選的方式

Python 版本

element = driver.find_element(by, locator)
#arguments[0]代表所傳值element的第一個引數
#click()代表js中的點選動作
driver.execute_script("arguments[0].click();",element)

Java 版本

WebElement element = driver.findElement(By);
// arguments[0]代表所傳值element的第一個引數
// click()代表js中的點選動作
JavascriptExecutor j = (JavascriptExecutor) driver;
j.executeScript("arguments[0].click();", element);

自動化過程中的報錯如下：

Other element would receive the click: 
<label class="custom-control-label" for="user_remember_me">...</label>

如果出現上面的錯誤，可以使用 js 的方式進行點選。

實戰演示

以企業微信為例，使用 js 點選新增圖片

#匯入依賴
from selenium import webdriver
from selenium.webdriver.common.by import By


class TestWework:
    def setup(self):
        self.driver = webdriver.Chrome()
        #隱式等待
        self.driver.implicitly_wait(10)

    def test_upload(self):
        #元素定位
        element_add = self.driver.find_element\
            (By.CSS_SELECTOR, ".js_upload_file_selector")
        #執行js程式碼
        self.driver.execute_script\
            ("arguments[0].click();", element_add)
        self.driver.find_element_by_id('js_upload_input').\
            send_keys('D:\project\demo1\demo.png')
        assert len(self.driver.find_elements(By.CSS_SELECTOR,\
            '.material_pic_list_item')) == 1

    def teardown(self):
        self.driver.quit()

import org.junit.jupiter.api.AfterAll;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

import java.util.concurrent.TimeUnit;

import static org.junit.jupiter.api.Assertions.assertEquals;

public class Web2Test {
    private static ChromeDriver driver;

    @BeforeAll
    public static void setUp() {
        System.setProperty(
                "webdriver.chrome.driver",
                "/driver/chrome95/chromedriver"
        );
        driver = new ChromeDriver();
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
    }

    @AfterAll
    public static void tearDown() {
        driver.quit();
    }

    @Test
    public void uploadTest() {
        // 元素定位
        WebElement element_add = driver.findElement(\
            By.cssSelector(".js_upload_file_selector"));
        // 執行js程式碼
        JavascriptExecutor j = (JavascriptExecutor) driver;
        j.executeScript("arguments[0].click();", element_add);
        driver.findElement(By.id("js_upload_input"))\
            .sendKeys("D:\\project\\demo1\\demo.png");
        int num = driver.findElements(By.cssSelector\
            (".material_pic_list_item")).size();
        assertEquals(num, 1);
    }
}

在測試工作中，JavaScript 也是經常會用到的，所以大家還是要多多練習，才能掌握的更紮實。