在运行时突出显示 WebDriver 中的元素 [英] Highlight elements in WebDriver during runtime
问题描述
有人可以帮忙吗！
如何在 WebDriver 中执行测试期间突出显示以下课程中的所有 Web 元素?使用 Selenium RC，它非常简单，但使用 WebDriver 我正在苦苦挣扎.
How can I highlight all web elements in following class during test execution in WebDriver? With Selenium RC, it was quite straight forward but with WebDriver I am struggling.
如果有人能提供一些我可以尝试的代码，我将不胜感激，以及该代码在哪里适合下面的类 - 抱歉，我的 Java 技能不是那么好.
I would be grateful if someone can please provide me with some code that I can try, also where would that code fit into the class below — sorry my Java skills aren't all that great.
package hisScripts;
import java.util.concurrent.TimeUnit;
import org.testng.annotations.*;
import org.testng.Assert;
import static org.testng.Assert.fail;
import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.ie.InternetExplorerDriver;
import org.openqa.selenium.interactions.Actions;
public class R_LHAS_Only_Account_Verification extends HIS_Login_Logout{
public WebDriver driver;
public String baseUrl;
public int exeMonth;
private StringBuffer verificationErrors = new StringBuffer();
@BeforeClass
@Parameters ({"browser1", "url", "executionMonth"})
public void setUp(String browser1, String url, int executionMonth) throws Exception {
exeMonth = executionMonth;
baseUrl = url;
if (browser1.equals("FF")) {
driver = new FirefoxDriver();
} else if (browser1.equals("IE")){
driver = new InternetExplorerDriver();
}
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
}
@Test
public void R_LHAS_Reports() throws Exception {
R_LHAS_Only_Login(baseUrl, driver);
Assert.assertEquals("Kingston upon Thames (RB)", driver.findElement(By.xpath("//html/body/div[9]/div/div[3]/div/div/div")).getText());
Assert.assertEquals("Average price", driver.findElement(By.xpath("//table[@id='tableId']/tbody/tr/td")).getText());
Assert.assertEquals("% price change", driver.findElement(By.xpath("//table[@id='tableId']/tbody/tr[2]/td")).getText());
Assert.assertEquals("Lower quartile price", driver.findElement(By.xpath("//table[@id='tableId']/tbody/tr[3]/td")).getText());
Assert.assertEquals("Time to sell (weeks)", driver.findElement(By.xpath("//table[@id='tableId']/tbody/tr[4]/td")).getText());
Assert.assertEquals("% asking price achieved", driver.findElement(By.xpath("//table[@id='tableId']/tbody/tr[5]/td")).getText());
Assert.assertEquals("House price to earnings ratio", driver.findElement(By.xpath("//table[@id='tableId']/tbody/tr[6]/td")).getText());
Assert.assertEquals("Cost of buying outright - LQ 2 bed £pw", driver.findElement(By.xpath("//table[@id='tableId']/tbody/tr[7]/td")).getText());
Assert.assertEquals("Private rent 2 bed £pw", driver.findElement(By.xpath("//table[@id='tableId']/tbody/tr[8]/td")).getText());
Assert.assertEquals("80% private rent 2 bed £pw", driver.findElement(By.xpath("//table[@id='tableId']/tbody/tr[9]/td")).getText());
Assert.assertEquals("Social rent 2 bed £pw", driver.findElement(By.xpath("//table[@id='tableId']/tbody/tr[10]/td")).getText());
R_LHAS_Only_Logout(baseUrl,driver);
}
@AfterClass(alwaysRun=true)
public void tearDown() throws Exception {
driver.quit();
String verificationErrorString = verificationErrors.toString();
if (! "".equals(verificationErrorString)) {
fail(verificationErrorString);
}
}
}
推荐答案
在 WebDriver(从 v2.21.0 开始).您可以尝试替换通常的 findElement(By) 方法与使用 JavaScript 突出显示找到的元素的调整方法:
There is no way to do this in WebDriver (as of v2.21.0). You can try replacing the usual findElement(By) method with an adjusted one that uses JavaScript to highlight the found element:
// Draws a red border around the found element. Does not set it back anyhow.
public WebElement findElement(By by) {
WebElement elem = driver.findElement(by);
// draw a border around the found element
if (driver instanceof JavascriptExecutor) {
((JavascriptExecutor)driver).executeScript("arguments[0].style.border='3px solid red'", elem);
}
return elem;
}
现在你已经明白了，有一个改进的版本，当找到一个新元素并突出显示时，它会恢复最后一个元素的原始 border:
Now that you got the idea, there's an improved version that restores the original border of the last element when a new one is found and highlighted:
// assuming JS is enabled
private JavascriptExecutor js = (JavascriptExecutor)driver;
private WebElement lastElem = null;
private String lastBorder = null;
private static final String SCRIPT_GET_ELEMENT_BORDER;
private static final String SCRIPT_UNHIGHLIGHT_ELEMENT;
void highlightElement(WebElement elem) {
unhighlightLast();
// remember the new element
lastElem = elem;
lastBorder = (String)(js.executeScript(SCRIPT_GET_ELEMENT_BORDER, elem));
}
void unhighlightLast() {
if (lastElem != null) {
try {
// if there already is a highlighted element, unhighlight it
js.executeScript(SCRIPT_UNHIGHLIGHT_ELEMENT, lastElem, lastBorder);
} catch (StaleElementReferenceException ignored) {
// the page got reloaded, the element isn't there
} finally {
// element either restored or wasn't valid, nullify in both cases
lastElem = null;
}
}
}
还有脚本！我使用 FileUtils.readFileToString().
And the scripts! I load them from a file using FileUtils.readFileToString().
SCRIPT_GET_ELEMENT_BORDER(IE 友好版本取自该站点)，如果它使用高亮显示会更短改变背景颜色，比如说，只有底部边框.但这是最好的一个:).
SCRIPT_GET_ELEMENT_BORDER (IE friendly version taken from this site), it would be way shorter if it used highlighting via changing the background color, say, only the bottom border. But this is the nicest one :).
/*
* Returns all border properties of the specified element as String,
* in order of "width style color" delimited by ';' (semicolon) in the form of:
*
* "2px inset #000000;2px inset #000000;2px inset #000000;2px inset #000000"
* "medium none #ccc;medium none #ccc;1px solid #e5e5e5;medium none #ccc"
* etc.
*/
var elem = arguments[0];
if (elem.currentStyle) {
// Branch for IE 6,7,8. No idea how this works on IE9, but the script
// should take care of it.
var style = elem.currentStyle;
var border = style['borderTopWidth']
+ ' ' + style['borderTopStyle']
+ ' ' + style['borderTopColor']
+ ';' + style['borderRightWidth']
+ ' ' + style['borderRightStyle']
+ ' ' + style['borderRightColor']
+ ';' + style['borderBottomWidth']
+ ' ' + style['borderBottomStyle']
+ ' ' + style['borderBottomColor']
+ ';' + style['borderLeftWidth']
+ ' ' + style['borderLeftStyle']
+ ' ' + style['borderLeftColor'];
} else if (window.getComputedStyle) {
// Branch for FF, Chrome, Opera
var style = document.defaultView.getComputedStyle(elem);
var border = style.getPropertyValue('border-top-width')
+ ' ' + style.getPropertyValue('border-top-style')
+ ' ' + style.getPropertyValue('border-top-color')
+ ';' + style.getPropertyValue('border-right-width')
+ ' ' + style.getPropertyValue('border-right-style')
+ ' ' + style.getPropertyValue('border-right-color')
+ ';' + style.getPropertyValue('border-bottom-width')
+ ' ' + style.getPropertyValue('border-bottom-style')
+ ' ' + style.getPropertyValue('border-bottom-color')
+ ';' + style.getPropertyValue('border-left-width')
+ ' ' + style.getPropertyValue('border-left-style')
+ ' ' + style.getPropertyValue('border-left-color');
}
// highlight the element
elem.style.border = '2px solid red';
return border;
SCRIPT_UNHIGHLIGHT_ELEMENT
SCRIPT_UNHIGHLIGHT_ELEMENT
var elem = arguments[0];
var borders = arguments[1].split(';');
elem.style.borderTop = borders[0];
elem.style.borderRight = borders[1];
elem.style.borderBottom = borders[2];
elem.style.borderLeft = borders[3];
欢迎提出任何问题、注释、请求和改进！
Any questions, notes, requests and improvements are welcome!
这篇关于在运行时突出显示 WebDriver 中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
