How to access an object from a webpage in selenium

StackOverflow https://stackoverflow.com/questions/23439370

質問

This is my first day using Selenium IDE and I have little web knowledge so please bear with me. My team is developing a website and I need to write tests for it. What the site is doing is it will show several charts of some data we've collected. I'm going to search for specific words in each chart to determine if the charts are showing correctly and alert to which ones aren't showing correctly.

So my problem is I don't know how to access each "chart object" individually. I can perform:

verifyTextPresent, target =, value = Good value

and that command will work (is green in Selenium IDE) as long as one of the 6 charts is showing correctly and has "Good value" in it. I think it's searching the whole webpage, which is why it works. If I want to test each of the charts individually, then I have problems.

Things that I've tried:

1) I tried right clicking on the chart object and Selenium IDE said the target is called

css=svg > rect

However, it keeps failing. The log says 

[error] Element css=svg > rect not found

2) I went to http://docs.seleniumhq.org/docs/02_selenium_ide.jsp#locating-elements to see what tips they had. Unfortunately, the examples didn't totally match what we're doing so I was randomly trying things, which also didn't work (my bad). I'll post the source html below so it makes more sense but these are some of the things I tried:

id=numRecs
identifier=charts-6
css=class#charts-container//chart-6

I did a search and the values above are one of a kind so there shouldn't be any confusion while parsing.

Here's the partial source for the chart object from Chrome. I can post more if needed but I think these are the key lines since when I roll my mouse over these two div objects, the chart gets highlighted in Chrome:

<body>
blah blah
   <div id="numRecs" data-chart="3">
      <div class="charts-container" id="charts-6" style="position: relative; overflow: hidden; width: 1267px; height: 300px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1267" height="300">
      blah blah
   <div id="another chart" data-chart="4">
      blah blah
   </div>
   <div id="misc chart" data-chart="5">
      blah blah
   </div>
</body>

Hopefully someone can point me in the right direction. Thanks in advance for your help.

役に立ちましたか？

解決

You can find elements with xpath, or css. I use Selenium in Java (Eclipse) with JUnit, and here are an example code to find elements with xpath:

@Test
public void test1() throws Exception {
    WebDriver driver = new FireFoxDriver();
    String url = "example.html";
    driver.get(url);
    Thread.sleep(5000);

    WebElement anotherChart = driver.findElement(By.id("another chart")); // find element by id
    String anotherChartText = anotherChart.getText(); // Use getText to check data ("blah blah")

    WebElement miscChart = driver.findElement(By.cssSelector("#another chart")); // find element with css
    String attribute = miscChart.getAttribute("data-chart"); // Get the specified attribute of the WebElement ("5")

    WebElement chart6 = driver.findElement(By.xpath("//div[@id='charts-6']")); // find element with xpath

    WebElement numRec = driver.findElement(By.xpath("//div[@id='numRecs']")); // find element with xpath
    WebElement numRecChart6 = numRec.findElement(By.xpath("div[@id='charts-6']")); // You can use WeElement.findElement() method to find an object in the WebElement

    driver.close();
}

I think xpath and css are helpful for you. To check your code, you can use xpath testers: http://www.freeformatter.com/xpath-tester.html#ad-output

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top