Accessing an object from a webpage using Selenium: A step-by-step guide

Question

Accessing an object from a webpage using Selenium: A step-by-step guide

Today marks my debut using Selenium IDE, and I must admit that my knowledge of web development is limited. My team is currently working on a website, and as part of my task, I need to write tests for it. The website features several charts showcasing data we've collected. My goal is to search for specific words within each chart to determine if they are accurate and identify any discrepancies.

However, I'm facing a challenge in accessing each "chart object" individually. When I use the command:

verifyTextPresent, target =, value = Good value

The command works fine (appears green in Selenium IDE) when one of the six charts displays "Good value" correctly. I believe it searches the entire webpage, which explains why it's successful. But when I attempt to test each chart separately, I encounter difficulties.

Here are some strategies I've experimented with:

1) I tried right-clicking on the chart object, and Selenium IDE identified the target as:

css=svg > rect

Despite this, the operation consistently fails, with the log showing:

[error] Element css=svg > rect not found

2) I visited http://docs.seleniumhq.org/docs/02_selenium_ide.jsp#locating-elements to gather insights. Unfortunately, the examples provided didn't align entirely with our setup, so my attempts were somewhat random and ineffective. While I'll include the source HTML below for context, here are some other methods I tried:

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

A thorough search indicates that these values are unique, reducing the potential for parsing errors.

Below is an excerpt from Chrome displaying partial source for the chart object. More information can be supplied upon request, but these snippets appear crucial – hovering over these div elements highlights the corresponding chart:

<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>

I am hopeful someone can steer me in the right direction. Thank you in advance for your assistance.

html css selenium selenium-ide

Answer 1

Answer №1

If you're looking to locate elements, you have the option of using xpath or css. Personally, I rely on Selenium within Java (specifically in Eclipse) with JUnit. Below is a snippet demonstrating how to find elements using 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")); // locating element by id
    String anotherChartText = anotherChart.getText(); // Utilizing getText to verify data ("blah blah")

    WebElement miscChart = driver.findElement(By.cssSelector("#another chart")); // locating element with css
    String attribute = miscChart.getAttribute("data-chart"); // Retrieving a specific attribute of the WebElement ("5")

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

    WebElement numRec = driver.findElement(By.xpath("//div[@id='numRecs']")); // locating element with xpath
    WebElement numRecChart6 = numRec.findElement(By.xpath("div[@id='charts-6']")); // Using WeElement.findElement() method to locate an object within the WebElement

    driver.close();
}

In my opinion, both xpath and css can be valuable tools for your needs. If you want to validate your code, consider utilizing xpath testers like:

Answer 2

If you're looking to locate elements, you have the option of using xpath or css. Personally, I rely on Selenium within Java (specifically in Eclipse) with JUnit. Below is a snippet demonstrating how to find elements using 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")); // locating element by id
    String anotherChartText = anotherChart.getText(); // Utilizing getText to verify data ("blah blah")

    WebElement miscChart = driver.findElement(By.cssSelector("#another chart")); // locating element with css
    String attribute = miscChart.getAttribute("data-chart"); // Retrieving a specific attribute of the WebElement ("5")

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

    WebElement numRec = driver.findElement(By.xpath("//div[@id='numRecs']")); // locating element with xpath
    WebElement numRecChart6 = numRec.findElement(By.xpath("div[@id='charts-6']")); // Using WeElement.findElement() method to locate an object within the WebElement

    driver.close();
}

In my opinion, both xpath and css can be valuable tools for your needs. If you want to validate your code, consider utilizing xpath testers like:

Accessing an object from a webpage using Selenium: A step-by-step guide

Answer №1

Similar questions

Looking for assistance with CSS selectors for the following structure

Can the hexadecimal value from an input type color be extracted and used to populate form fields that will then be displayed in a table after submission?

Do you know of a more streamlined approach to formatting this SCSS code?

HTML script tag failing to load

Are personalized URLs necessary for jump anchor links?

Different approach to handling overflow without using the hidden property in CSS

BeautifulSoup and Selenium are unable to fetch the complete HTML content from the website

"Introducing a smooth animation effect to shift text alignment to the center

Exploring reviews with an innovative combination of Node.js and MongoDB

How come modifying the css of one component impacts all the other components?

Determine if a link can be activated or disabled

How come the `table-fixed` class in Bootstrap isn't converting my table into a scrolling one?

Having trouble pinpointing the elusive element in Selenium?

Selenium: The pitfall of using the "if" statement to determine the presence of an element in automation testing

What is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

Trying out the combination of PyInstaller, Selenium, and Pandas

Why is the parameter value becoming null during an Ajax call?

Utilizing Angular to apply multiple ng-repeat directives with multiple filters

Tips for arranging cards in columns without causing vertical scrolling to be triggered

Is the CSS scale activated by mouseover or click?