# 9S WebDriver – 處理文本框和圖像 > 原文： [https://javabeginnerstutorial.com/selenium/9s-webdriver-handling-text-boxes-images/](https://javabeginnerstutorial.com/selenium/9s-webdriver-handling-text-boxes-images/) 嗨呀測試人員！ 如果您一直在關注我的帖子，那么您應該已經是使用 Selenium WebDriver 輸入文本的專家。 如果不是（帶著悲傷的表情），那就不用擔心了！ 我把你們都覆蓋了。 ## 處理文本框 您可能正在向兩種類型的輸入文本框輸入文本。 * *第一種類型*是您在每個用于輸入所要詢問信息的網頁中看到的普通文本框。 它按原樣顯示輸入的值。 * *第二種類型*是密碼文本框，用戶在其中鍵入一個值，出于安全原因，它顯示為點或星號或任何其他特殊字符。 好消息是，對于這兩種文本框類型，都可以使用相同的命令輸入所需的值。 **示例**：讓我們在“名字”中輸入“`testFirst`”，在“創建密碼”字段中輸入“`test1234!`。 **說明**：通過 **id** 找到所需的元素，然后使用`sendKeys("value")`方法輸入相應的值。 考慮以下代碼， ```java <input value="" name="FirstName" id="FirstName" spellcheck="false" type="text"> <input name="Passwd" id="Passwd" type="password"> ``` 我們可以看到，`input`標簽具有“`id`”屬性，名稱和密碼字段的屬性分別為“`FirstName`”和“`Passwd`”。 使用這些 ID 定位這些網絡元素后，我們將分別傳遞“`testFirst`”和“`test1234!`”作為它們的值。 *代碼：* ```java driver.findElement(By.id("FirstName")).sendKeys("testFirst"); driver.findElement(By.id("Passwd")).sendKeys("test1234!"); ``` 要清除文本框中可能存在的任何文本，請使用`clear()`方法。 它不需要任何參數。 輸出如下  ## 點擊圖片 可以通過多種方式選擇圖像。 通過 ID，名稱，`className`，`cssSelector`，xpath 等。 我希望這樣做是因為定位圖像有時會非常棘手。 請使用 WebDriver 中提供的使用各種策略定位元素的[定位元素的先前帖子，以防您錯過它們。](https://javabeginnerstutorial.com/selenium/9j-webdriver-locating-elements-1/) 讓我們來看一個示例場景，為什么這個過程很棘手。 **示例**：導航至 [www.amazon.com](https://www.amazon.com) ，然后單擊主頁上顯示的“kindle”圖像（與創建該帖子的日期相同）。 單擊圖像后，我們應該導航到相應頁面。  右鍵點擊“Kindle”圖片和檢查元素。 相應的 HTML 代碼是 ```java <a class="a-link-normal" href="/b/ref=br_pdt_mgUpt?_encoding=UTF8&amp;node=6669702011&amp;pf_rd_m=ATVPDKIKX0DER&amp;pf_rd_s=&amp;pf_rd_r=5VQBXJP2N17GX77H0TN9&amp;pf_rd_t=36701&amp;pf_rd_p=9c7b479f-fe0c-48f3-a1ab-c19df6492672&amp;pf_rd_i=desktop"> <img alt="Kindle" src="https://images-na.ssl-images-amazon.com/images/G/01/gateway/yiyiz/Kindle._CB300901238_.png" width="292px" height="292px"> </a> ``` **說明**：如您所見，“`img`”標簽既沒有提供“`id`”屬性，也沒有提供“`class`”屬性。 這樣就很難找到一個小小的中間！ 對于您在網絡上找到的大多數圖像，情況就是如此。 考慮到 HTML 代碼，可以使用`cssSelector`定位策略。 通過這種策略定位圖像的方法有兩種， 一個。 使用“`img`”標簽和“`src`”屬性 ```java driver.findElement(By.cssSelector("img[src='https://images-na.ssl-images-amazon.com/images/G/01/gateway/yiyiz/Kindle._CB300901238_.png']")); ``` b。 使用“`a`”標簽，使用“`.`”符號訪問其類名。 在空格處指定其子元素，“`img`”標簽和“`src`”屬性 ```java driver.findElement(By.cssSelector("a.a-link-normal img[src='https://images-na.ssl-images-amazon.com/images/G/01/gateway/yiyiz/Kindle._CB300901238_.png']")); ``` 也可以使用 **Xpath** 定位策略。 通過這種策略定位圖像的方法有兩種， 一個。 將“`a`”標簽與“`class`”屬性一起使用，從而找到其子元素“`img`” ```java driver.findElement(By.xpath("//a[@class='a-link-normal']/img")); ``` b。 直接將`img`標簽及其`src`屬性使用 ```java driver.findElement(By.xpath("//img[@src='https://images-na.ssl-images-amazon.com/images/G/01/gateway/yiyiz/Kindle._CB300901238_.png']")); ``` *正在考慮的場景，* 1. 打開 Firefox 瀏覽器 2. 導航至 [https://amazon.com](https://www.amazon.com) 3. 將頁面標題打印到控制臺 4. 找到主頁上顯示的“Kindle”圖片 5. 點擊圖片 6. 再次將導航的頁面標題打印到控制臺 7. 在 Eclipse IDE 中驗證 JUnit 窗口是否成功 此方案的 JUnit 代碼是， ```java package com.blog.junitTests; import java.util.concurrent.TimeUnit; import org.junit.After; import org.junit.Before; import org.junit.Test; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class Click_Image { //Declaring variables private WebDriver driver; private String baseUrl; @Before public void setUp() throws Exception{ // Selenium v3 beta releases require system property set up System.setProperty("webdriver.gecko.driver", "E:\\Softwares\\" + "Selenium\\geckodriver-v0.10.0-win64\\geckodriver.exe"); // Create a new instance for the class FirefoxDriver // that implements WebDriver interface driver = new FirefoxDriver(); // Implicit wait for 5 seconds driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS); // Assign the URL to be invoked to a String variable baseUrl = "https://www.amazon.com/"; } @Test public void testPageTitle() throws Exception{ // Open baseUrl in Firefox browser window driver.get(baseUrl); // Printing page title to console System.out.println(driver.getTitle()); // Locate an image with xpath WebElement kindle = driver.findElement(By.cssSelector("img[src='https://images-na.ssl-images-amazon.com/images/G/01/gateway/yiyiz/Kindle._CB300901238_.png']")); // Click the image kindle.click(); // Printing page title after clicking the image System.out.println("Navigated page title: "+driver.getTitle()); } @After public void tearDown() throws Exception{ // Close the Firefox browser driver.close(); } } ``` *執行結果：* 代碼是不言自明的，因為每行都有注釋。 在 JUnit 窗口中，綠色條顯示測試用例已成功執行。 控制臺窗口顯示沒有任何錯誤以及單擊圖像前后的頁面標題。  下圖顯示了成功執行測試腳本后獲得的 Firefox 輸出。  現在該輪到您嘗試這些新學到的技能了。 有什么問題嗎？在評論部分開火！ 在那之前，請在另一篇文章中見。 祝你有美好的一天！