使用Selenium WebDriver測試瀏覽器之間的視覺差異

也許我錯過了一個Selenium的功能塊。在進行跨瀏覽器測試時，我主要試圖瞭解我的需求。經過數週的手動測試後，我意識到我測試的頁面功能完全相同，但是我遇到的所有問題都來自視覺問題。我不需要斷言，而不是一個元素在那裏;如果它在一個瀏覽器中，它就是一切。數據在瀏覽器之間也不會改變。使用Selenium WebDriver測試瀏覽器之間的視覺差異

所以我的問題主要是視覺問題。如在Internet Explorer中顯示在另一個文本框中的文本框與它在Firefox和Chrome中應該位於同一行時。所顯示的字體類型在不同瀏覽器中應該是相同的。標題行換行是因爲在一個瀏覽器中的字體大小導致它在另一個瀏覽器中停留在同一行時執行此操作。

有沒有人知道上述情況的可用示例？ Selenium是我使用的正確工具嗎？或者我應該堅持這樣的手動測試嗎？

來源

2012-08-16 Scott Arg

你問錯組...找到某種機器視覺，硒僅與HTML交互和DOM – Greg 2012-08-16 04:45:52

還不錯，最好所有網頁操作以同樣的方式跨瀏覽器，但並非所有的瀏覽器都以相同的方式編寫，這就是爲什麼一個錯誤可以彈出在FF上，不會顯示在Chrome上;但IE似乎是給大家帶來最大麻煩的一個。 – Greg 2012-08-16 05:14:09

當然，也許我會與跨瀏覽器功能的嚮導合作。我從未遇到缺少元素或錯誤彈出窗口的問題。如果文字，元素或圖像存在，它就在那裏。所以對我來說，在3種不同的瀏覽器中檢查類似的東西似乎毫無用處。與其他瀏覽器相比，它更多的是「這個div的位置」。我想是檢查元素和他們的像素位置是我正在尋找。 – 2012-08-16 12:23:03

我建議在不同的瀏覽器中運行測試時採取屏幕截圖。然後您可以一次比較不同瀏覽器中的視圖。是的，它會涉及一些手動審查，但可以使用Selenium自動執行操作，這將爲您節省大量時間。

您可以使用函數像

public void takeScreenShot (String filename) throws Exception { 
    File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE); 
    FileUtils.copyFile(scrFile, new File("[path to storing folder]"+ filename + ".jpg")); 
}

你可以調用這個函數的任何地方，你覺得有些動作被執行後的看法是非常重要的。

你將不得不 -

import org.openqa.selenium.OutputType; 
import org.openqa.selenium.TakesScreenshot;

但是Eclipse可以利用這部分的護理。 :)

我希望這回答您的查詢！

來源

2012-08-16 09:27:00

感謝您的代碼片段。我有一種感覺，這是我需要採取的路線。 – 2012-08-16 12:20:02

你也可以通過使用** getLocation（）**和** getCoordinates（）**來設計你的測試來檢查元素位置，但是請注意，它們並不總是正確的。 :) – 2012-08-16 13:25:46

可能很晚纔回答這個問題。

您可以使用Sikuli庫實現此目的。這僅適用於Java語言。比較用戶界面的好工具。

來源

2013-12-09 20:36:39

其實Sikuli不太擅長圖像比較，但另一方面可用於測試自動化。 – ITguy 2018-02-14 08:36:14

您可以使用Ocular - 使用Selenium WebDriver進行視覺驗證的開源庫。

來源

2017-07-05 19:07:22 vins

使用Selenium WebDriver測試瀏覽器之間的視覺差異

回答

相關問題