使用Selenium進行網頁自動化

蘇保嘉 2020/12/22 17:10:40

0 8476

一、前言

隨著網站開發的規模及數量越來越多，使用人工測試的方式是非常耗時的，這時候我們可以使用Selenium進行網頁的自動化測試，Selenium也提供了非常多的函式庫

另外Selenium也可以用來撰寫自動化腳本。

本篇文章將以JAVA來簡介Selenium的基本使用，最後來實做自動化腳本的範例。

二、安裝

1.建立完SpringBoot Maven專案後，在pom.xml導入Selenium library。

    <dependency>
        <groupId>org.seleniumhq.selenium</groupId>
        <artifactId>selenium-java</artifactId>
        <version>3.141.59</version>
    </dependency>

2.再來我們需要安裝Selenium的WebDriver，Selenium有對瀏覽器提供了不同的WebDriver，這次我使用Google Chrome作為範例，因此需要額外下載ChromeDriver並設定環境變數。

相關完整的安裝教學可以在Github上找到，這邊附上Github連結：ChromeDriver

首先我們先確認使用的Google Chrome版本，只要在瀏覽器搜尋欄輸入chrome://version/既可察看版本。

我使用的版本為87.0.4280.88 (正式版本) 。

然後選擇相對應版本的ChromeDriver下載。

下載後將檔案解壓縮到Google Chrome的安裝位置。

接著將chromedriver的路徑位置設定到環境變數的PATH中。

接著來測試看看有沒有安裝成功，我們測試自動到Google首頁並取得pageTitle。

	public static void main(String[] args) {
		//若瀏覽器安裝位置為預設則webDriver會自動搜尋path設定的位置，也可以使用System.setProperty 來指定路徑
		System.setProperty("webdriver.chrome.driver", "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");
		//Selenium對不同瀏覽器提供了不同的webDriver
		WebDriver driver = new ChromeDriver(); // googleChrome
		// Firefox
		//WebDriver firefoxDriver = new FirefoxDriver();  
		// 到Google首頁
		driver.get("https://www.google.com.tw/");
		// 取得pageTitle
		String title = driver.getTitle();
		System.out.print(title);
	}

測試結果如下：

可以看到成功自動執行開啟瀏覽器並到Google首頁，而且在Console中印出pageTitle。

三、實作

安裝完成後我們來實作網頁的自動化，首先我們先介紹一些Selenium對網頁元素的操作，最後來簡單實作開啟Google首頁並自動搜尋。

1.selenium 提供了8種的定位方式如下：

		driver.findElement(By.id("elementId")); // 用元素的id屬性值來定位元素
		driver.findElement(By.name("elementName")); // 用元素的name屬性值來定位元素
		driver.findElement(By.className("elementClass")); // 用元素的class名稱來定位元素
		driver.findElement(By.tagName("input")); // 用元素的tag標籤來定位元素
		driver.findElement(By.linkText("登入")); // 用元素的文字內容來定位元素
		driver.findElement(By.partialLinkText("測試")); // 用元素的部分文字內容來定位元素
		driver.findElement(By.xpath("//input[@id='kw']")); // 用xpath語法來定位元素
		driver.findElement(By.cssSelector("#kw")); // 用CSS選擇器來定位元素

如果是複數元素的話，只需要改寫成findElements既可

		driver.findElements(By.id("elementId")); // 用元素的id屬性值來定位元素
		driver.findElements(By.name("elementName")); // 用元素的name屬性值來定位元素
		driver.findElements(By.className("elementClass")); // 用元素的class名稱來定位元素
		driver.findElements(By.tagName("input")); // 用元素的tag標籤來定位元素
		driver.findElements(By.linkText("登入")); // 用元素的文字內容來定位元素
		driver.findElements(By.partialLinkText("測試")); // 用元素的部分文字內容來定位元素
		driver.findElements(By.xpath("//input[@id='kw']")); // 用xpath語法來定位元素
		driver.findElements(By.cssSelector("#kw")); // 用CSS選擇器來定位元素

2.剛剛介紹了對於網頁元素的定位，再來簡單介紹一下selenium 對網頁元素的控制吧。

		WebDriver driver = new ChromeDriver();
		driver.get("https://www.google.com.tw/");
		//定位網頁元素
		WebElement element = driver.findElement(By.name("q"));
		//對元素點擊
		element.click();
		//清空內容(例如input欄位)
		element.clear();
		//對元素輸入內容(例如input欄位輸入資料)
		element.sendKeys("selenium");
		// 元素是否可見(true:是，false:否)
		element.isDisplayed();
		// 元素是否啟用
		element.isEnabled();
		// 元素是否已選
		element.isSelected();
		// 對元素做FormSubmit的操控
		element.submit();

簡單認識了一些selenium對於網頁元素的定位及操控，我們來簡單操作一下用selenium自動打開Google Chrome並且搜尋selenium。

首先開啟Chrome瀏覽器並打開開發人員工具可以看到搜尋欄位的name="q"，因此我們只需要先定位這個元素再模擬輸入要搜尋的內容最後送出既可完成這個小測試。

	public static void main(String[] args) {
		System.setProperty("webdriver.chrome.driver", "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();
		driver.get("https://www.google.com.tw/");
		//使用name定位網頁元素
		WebElement element = driver.findElement(By.name("q"));
		//對元素輸入內容
		element.sendKeys("selenium");
		// 對元素做FormSubmit的操控
		element.submit();
	}

可以看到如我們預期自動打開瀏覽器並進行搜尋