在运行时突出显示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);
}
}
}
推荐答案
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屋！
