在網頁上驗證圖像使用Geb和Spock

Question

我剛剛使用geb和spock，但我試圖驗證在網頁上顯示的圖像，當我只有代碼的視圖源時。任何建議表示讚賞！我將此代碼建模爲我之前編寫的鏈接測試，所以我肯定我錯過了一些東西。我的頁面文件的一個例子是：

// code not included where I have defined the url/etc. Below is content 

someImage { $("img", file: "image-logo.png") } 

而且我的規格頁面的例子是：

def "Valid image"() { 
     given: "an image checker" 
     to SomePage 
     when: 
     someImage.hover() 
     then: 
     verifyAt() 

Answer 1

您可以驗證圖像的造型被設置爲displayed，具有CSS屬性的任何內容無法通過webdriver API與display: none進行交互。

我曾經歷過的一些問題與使用上的蓋布導航對象isDisplayed方法，所以我會做到以下幾點：

在其中定義頁面內容添加一個方法來檢查的內容可以進行交互（因此是設置爲顯示）：

someImage { $("img", file: "image-logo.png") } 

Boolean contentDisplayed(Navigator content) { 
    content 
} 

那麼你的測試將是這樣的：

def "Valid image"() { 
    given: "an image checker" 
    to SomePage 
    when: 
    someImage.hover() 
    then: 
    contentDisplayed(someImage) 

它這裏值得注意的只要在這裏訪問.hover方法，就可以驗證圖像是displayed就css而言。所以你可以簡化測試：

def "Valid image"() { 
    when: "an image checker" 
    to SomePage 
    then: 
    contentDisplayed(someImage)