前言
UI 測(cè)試的本質(zhì)在于模擬人手的點(diǎn)擊和肉眼的審查，然而逝嚎，不管是點(diǎn)擊頁(yè)面上的按鈕還是查看這些控件是否正確都需要先定位到這些元素僻弹。selenium 提供了多種定位方式，不過(guò)主要以“CSS 選擇器”為主并炮。因?yàn)槠渌椒ǘ伎梢钥闯伤淖蛹眨赃@里只討論 CSS 定位。本文先討論 CSS 選擇器編寫(xiě)流程
CSS 選擇器編寫(xiě)流程
這里我們以“登錄 Coding”的為例進(jìn)行說(shuō)明逃魄。
分析測(cè)試
登錄操作主要分四步走：打開(kāi)登入首頁(yè)荤西，輸入用戶名，輸入密碼伍俘，點(diǎn)擊登錄按鈕邪锌。因此，需要編寫(xiě)三個(gè)元素（用戶名輸入框养篓，密碼輸入框秃流，登錄按鈕）的 CSS 選擇器。
審查元素
編寫(xiě) CSS 選擇器柳弄，必須先知道元素背后的 html 源碼結(jié)構(gòu)舶胀，可以使用瀏覽器的“審查元素”功能進(jìn)行查看 。打開(kāi) Coding 登錄頁(yè)面碧注，將鼠標(biāo)放在要審查的元素上嚣伐，右擊，選擇“審查元素”即可萍丐。
Paste_Image.png
查看 html 源碼
查看 html 源碼
編寫(xiě)選擇器
觀察兩個(gè)輸入框轩端，發(fā)現(xiàn)都有 id 屬性，根據(jù) id 優(yōu)先的原則逝变，以 id 作為選擇器基茵。登錄按鈕沒(méi)有選擇器奋构，就選用 class 屬性。得到的選擇器如下：“#email”, “#password”, “.large.green.button”
編寫(xiě)測(cè)試代碼
@Test
public void loginCoding() {
FirefoxDriver driver = new FirefoxDriver();
driver.navigate().to("https://coding.net/login");
driver.findElement(By.cssSelector("#email")).sendKeys("ciwang");
driver.findElement(By.cssSelector("#password")).sendKeys("coding0620");
driver.findElement(By.cssSelector(".large.green.button")).click();
}
運(yùn)行調(diào)試
Paste_Image.png
