Selenium WebDriver - 表單處理

Selenium Webdriver 可用於處理網頁上的表單。在 HTML 術語中，表單元素由名為Form 的標籤名標識。此外，它還應該具有提交表單的功能，用於表單提交的元素應該具有名為input 的標籤名，以及值為submit 的屬性type。需要注意的是，網頁上的表單可能包含文字框、連結、複選框、單選按鈕和其他 Web 元素，這些元素可以幫助使用者在網頁上輸入詳細資訊。

網頁上表單的識別

右鍵單擊 Chrome 瀏覽器中開啟的頁面。單擊“檢查”按鈕。之後，整個頁面的HTML 程式碼將可見。要檢查頁面上的表單元素，請單擊 HTML 程式碼頂部左側的向上箭頭，如下所示。

單擊並將箭頭指向表單內的任何元素（例如，“註冊”按鈕）後，其 HTML 程式碼將可用，反映了form 標籤名。

在上圖表單中，我們可以使用註冊按鈕提交包含詳細資訊的表單。單擊並將箭頭指向註冊按鈕後，其 HTML 程式碼將出現，反映了input 標籤名及其值為submit 的type 屬性。

<input type="submit" class="btn btn-primary" value="Register">

我們可以使用 submit() 和 click() 方法提交表單。普通按鈕和提交按鈕之間的基本區別在於，普通按鈕只能與 click() 方法互動，而提交按鈕可以使用 click() 和 submit() 方法互動。

語法

使用 submit 方法的語法：

WebDriver driver = new ChromeDriver();

// identify input box 1
WebElement inputBx = driver.findElement
   (By.xpath("<value of xpath>"));
inputBx.sendKeys("Selenium");

// submit form
WebElement btn = driver.findElement
   (By.xpath("<value of xpath>"));
btn.submit();

此外，普通按鈕具有input 標籤名，其type 屬性的值應為button。在下面的頁面中，讓我們看看網頁上Click Me按鈕的HTML程式碼。

<button type="button" class="btn btn-primary" 
   onclick="showDiv()">Click Me</button>

示例 1 - 使用 submit() 方法

讓我們以下面頁面中的表單為例，該表單包含 Web 元素 - 標籤、輸入框、按鈕、密碼等等。

語法

WebDriver driver = new ChromeDriver();

// identify input box 1
WebElement inputBx = driver.findElement
   (By.xpath("<value of xpath>"));
inputBx.sendKeys("Selenium");

// get value entered
System.out.println("Value entered in FirstName: " + inputBx.getAttribute("value"));

// identify input box 2
WebElement inputBx2 = driver.findElement
   (By.xpath("<value of xpath>"));
inputBx2.sendKeys("Tutorials");

// get value entered
System.out.println("Value entered in LastName: " + inputBx2.getAttribute("value"));

// identify input box 3
WebElement inputBx3 = driver.findElement
   (By.xpath("<value of xpath>"));
inputBx3.sendKeys("Tutorialspoint");

// identify input box 4
WebElement inputBx4 = driver.findElement
   (By.xpath("<value of xpath>"));
inputBx3.sendKeys("Tutorialspoint");

// submit form
WebElement btn = driver.findElement
   (By.xpath("<value of xpath>"));
btn.submit();

程式碼實現

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class FormElements {
   public static void main(String[] args) {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will identify form
      driver.get("https://tutorialspoint.tw/selenium/practice/register.php");

      // identify input box 1
      WebElement inputBx = driver.findElement(By.xpath("//*[@id='firstname']"));
      inputBx.sendKeys("Selenium");

      // get value entered
      System.out.println("Value entered in FirstName: " + inputBx.getAttribute("value"));

      // identify input box 2
      WebElement inputBx2 = driver.findElement(By.xpath("//*[@id='lastname']"));
      inputBx2.sendKeys("Tutorials");

      // get value entered
      System.out.println("Value entered in LastName: " + inputBx2.getAttribute("value"));

      // identify input box 3
      WebElement inputBx3 = driver.findElement(By.xpath("//*[@id='username']"));
      inputBx3.sendKeys("Tutorialspoint");

      // get value entered
      System.out.println("Value entered in UserName: " + inputBx3.getAttribute("value"));

      // identify input box 4
      WebElement inputBx4 = driver.findElement(By.xpath("//*[@id='password']"));
      inputBx3.sendKeys("Tutorialspoint");

      // submit form with submit method
      WebElement btn = driver.findElement(By.xpath("//*[@id='signupForm']/div[5]/input"));
      btn.submit();

      // Close browser
      driver.quit();
   }
}

輸出

Value entered in FirstName: Selenium
Value entered in LastName: Tutorials
Value entered in UserName: Tutorialspoint

Process finished with exit code 0

在上面的示例中，我們填寫了包含輸入框的表單，然後在控制檯中獲取輸入的值（密碼欄位除外），顯示訊息 - FirstName 中輸入的值：Selenium，LastName 中輸入的值：Tutorials，以及UserName 中輸入的值：Tutorialspoint。

最後，收到訊息Process finished with exit code 0，表示程式碼成功執行。

示例 2 - 使用 click() 方法

讓我們再以下面頁面中的表單為例，該表單包含 Web 元素 - 標籤、輸入框、按鈕、密碼等等。

語法

使用 click() 方法的語法：

WebDriver driver = new ChromeDriver();

// identify input box 1
WebElement inputBx = driver.findElement(By.xpath("<value of xpath>"));
inputBx.sendKeys("Selenium");

// get value entered
System.out.println("Value entered in FirstName: " + inputBx.getAttribute("value"));

// identify input box 2
WebElement inputBx2 = driver.findElement(By.xpath("<value of xpath>"));
inputBx2.sendKeys("Selenium");

// submit form
WebElement btn = driver.findElement(By.xpath("<value of xpath>"));
btn.click();

程式碼實現

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class FormElement {
   public static void main(String[] args) {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will identify form
      driver.get("https://tutorialspoint.tw/selenium/practice/login.php");

      // identify input box 1
      WebElement inputBx = driver.findElement(By.xpath("//*[@id='email']"));
      inputBx.sendKeys("Selenium");

      // get value entered
      System.out.println("Value entered in Email: " + inputBx.getAttribute("value"));

      // identify input box 2
      WebElement inputBx2 = driver.findElement(By.xpath("//*[@id='password']"));
      inputBx2.sendKeys("Tutorials");

      // submit form with click() method
      WebElement btn = driver.findElement(By.xpath("//*[@id='signInForm']/div[3]/input"));
      btn.click();

      // Closing browser
      driver.quit();
   }
}

輸出

Value entered in Email: Selenium

在上面的示例中，我們填寫了包含輸入框的表單，然後在控制檯中獲取輸入的值（密碼欄位除外），顯示訊息 - Email 中輸入的值：Selenium。

結論

本教程全面介紹了 Selenium WebDriver 表單處理。我們從描述如何在網頁上識別表單開始，並逐步講解了如何使用 Selenium Webdriver 處理表單的示例。這使您能夠深入瞭解 Selenium WebDriver 表單處理。最好繼續練習您學到的知識，並探索其他與 Selenium 相關的知識，以加深您的理解並拓寬您的視野。

列印頁面