Obtaining the text of a span tag within a div using Selenium in C#

Question

Obtaining the text of a span tag within a div using Selenium in C#

<div id="uniqueSummaryID" class="custom-text" data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_key_25.1.1.0">
<span data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_key_25.1.1.0.0">5</span>
<span data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_key_25.1.1.0.1">/</span>
<span data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_key_25.1.1.0.2">15</span>
</div>

How can I extract the values '5' and '15' from the above HTML structure by targeting the div with id 'uniqueSummaryID', ideally without relying on XPath in Selenium using C#?

c#html css selenium

Answer 1

Answer №1

To target specific elements on a webpage, you can employ a CSS selector:

driver.FindElements(By.CssSelector("#targetSummaryCount > span"))

This code snippet will select all span elements that are directly nested under the element with the id="targetSummaryCount".

Answer 2

To target specific elements on a webpage, you can employ a CSS selector:

driver.FindElements(By.CssSelector("#targetSummaryCount > span"))

This code snippet will select all span elements that are directly nested under the element with the id="targetSummaryCount".

Answer 3

Answer №2

Here is the provided solution in Java. Could you please assist me in converting it to C#?

    WebElement divSummary = driver.findElementById("targetSummaryCount");
    List<WebElement> targetKeys = divSummary.findElements(By.tagName("span"));
    // To retrieve the first and last elements
    targetKeys.get(0);
    targetKeys.get(targetKeys.size()-1);

    // To maintain a queue of elements with text 0 or 20
    HashMap <Integer, List<WebElement>> elementmap = new HashMap <Integer, List<WebElement>>();
    List<WebElement> webElements1 = new ArrayList<WebElement>();
    List<WebElement> webElements2 = new ArrayList<WebElement>();
    for (WebElement elem : targetKeys){
        if(elem.getText().trim().equals("0")){
            webElements1.add(elem);
        }
        else if (elem.getText().trim().equals("20")){
            webElements2.add(elem);
        }
    }
    elementmap.put(0,webElements1);
    elementmap.put(20,webElements1);
    // elementmap.get(0) contains all span tags under the target Summary Count div tag
    // elementmap.get(20) contains all span tags under the target Summary Count div tag

Answer 4

Here is the provided solution in Java. Could you please assist me in converting it to C#?

    WebElement divSummary = driver.findElementById("targetSummaryCount");
    List<WebElement> targetKeys = divSummary.findElements(By.tagName("span"));
    // To retrieve the first and last elements
    targetKeys.get(0);
    targetKeys.get(targetKeys.size()-1);

    // To maintain a queue of elements with text 0 or 20
    HashMap <Integer, List<WebElement>> elementmap = new HashMap <Integer, List<WebElement>>();
    List<WebElement> webElements1 = new ArrayList<WebElement>();
    List<WebElement> webElements2 = new ArrayList<WebElement>();
    for (WebElement elem : targetKeys){
        if(elem.getText().trim().equals("0")){
            webElements1.add(elem);
        }
        else if (elem.getText().trim().equals("20")){
            webElements2.add(elem);
        }
    }
    elementmap.put(0,webElements1);
    elementmap.put(20,webElements1);
    // elementmap.get(0) contains all span tags under the target Summary Count div tag
    // elementmap.get(20) contains all span tags under the target Summary Count div tag

Answer 5

Answer №3

If you want to retrieve the values "0" and "20" using XPath, you can use the following code:

string num1 = driver.FindElementByXPath("//div[@id='targetSummaryCount']/span[1]").Text;
string num2 = driver.FindElementByXPath("//div[@id='targetSummaryCount']/span[3]").Text;

// Alternatively,
var elements = driver.FindElementsByXPath("//div[@id='targetSummaryCount']/span");
string num1 = elements[0].Text;
string num2 = elements[2].Text;

You can also achieve this with a Css Selector like so:

string num1 = driver.FindElementByCssSelector("#targetSummaryCount > span:nth-child(1)").Text;
string num2 = driver.FindElementByCssSelector("#targetSummaryCount > span:nth-child(3)").Text;

// Or using even CSS selector
var elements = driver.FindElementsByCssSelector("#targetSummaryCount > span:nth-child(even)");
string num1 = elements[0].Text;
string num2 = elements[1].Text;

Answer 6

If you want to retrieve the values "0" and "20" using XPath, you can use the following code:

string num1 = driver.FindElementByXPath("//div[@id='targetSummaryCount']/span[1]").Text;
string num2 = driver.FindElementByXPath("//div[@id='targetSummaryCount']/span[3]").Text;

// Alternatively,
var elements = driver.FindElementsByXPath("//div[@id='targetSummaryCount']/span");
string num1 = elements[0].Text;
string num2 = elements[2].Text;

You can also achieve this with a Css Selector like so:

string num1 = driver.FindElementByCssSelector("#targetSummaryCount > span:nth-child(1)").Text;
string num2 = driver.FindElementByCssSelector("#targetSummaryCount > span:nth-child(3)").Text;

// Or using even CSS selector
var elements = driver.FindElementsByCssSelector("#targetSummaryCount > span:nth-child(even)");
string num1 = elements[0].Text;
string num2 = elements[1].Text;

Answer 7

Answer №4

Give this a shot.

        var count = driver.FindElements(By.XPath("//*[@id='targetSummaryCount']/span")).Count;
        var finalResult = "";
        for (int index = 0; index < count; index++)
        {
            var text = driver.FindElement(By.XPath("//*[@id='targetSummaryCount']/span[" + index + "]")).Text;

            if (text != "/")
            {
                finalResult += "span:" + index + " text:" + finalResult;
            }
        }

Answer 8

Give this a shot.

        var count = driver.FindElements(By.XPath("//*[@id='targetSummaryCount']/span")).Count;
        var finalResult = "";
        for (int index = 0; index < count; index++)
        {
            var text = driver.FindElement(By.XPath("//*[@id='targetSummaryCount']/span[" + index + "]")).Text;

            if (text != "/")
            {
                finalResult += "span:" + index + " text:" + finalResult;
            }
        }

Answer 9

Answer №5

One approach to consider is accessing the span element that is a descendant of the div with the id targetSummaryCount and contains either the text 0 or 20.

var span_00 = driver.FindElementByXPath("//div[@id='targetSummaryCount']/span[text()='0']");

var span_20 = driver.FindElementByXPath("//div[@id='targetSummaryCount']/span[text()='20']");

Answer 10

One approach to consider is accessing the span element that is a descendant of the div with the id targetSummaryCount and contains either the text 0 or 20.

var span_00 = driver.FindElementByXPath("//div[@id='targetSummaryCount']/span[text()='0']");

var span_20 = driver.FindElementByXPath("//div[@id='targetSummaryCount']/span[text()='20']");

Obtaining the text of a span tag within a div using Selenium in C#

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Ensure that all content in the table rows remains visible, even in a table with unusually lengthy cells

Bypass Security Check in Firefox

When viewing HTML emails in dark mode on iOS Gmail, the CSS appears to be inverted

Tips for extracting data from an Angular object using the *ngFor directive

Oops! There seems to be an issue with the argument "handle" in window handling using Selenium and Java on a Linux system. It appears that the argument must be a string

The Zoom CSS property seems to be experiencing some issues on the Firefox browser

The fillOpacity and opacity properties appear to be malfunctioning

The viewport width in NextJS does not extend across the entire screen on mobile devices

Leveraging em units in jQuery Script

Execute the maven project containing a profile that includes the JUnit runner

Utilizing the same browser session across various scenarios

Ways to implement schema.org and JSON-LD for data labeling on a homepage of a website

Ways to evenly distribute children in a row using CSS

Executing horizontal scrolling on a website by clicking a button with Selenium

What is the best way to eliminate the border in IE edge that surrounds special characters?

Saving Ruby Selenium Screenshot to a designated File directory

Ensure the padding and margin are both set to 0 when using inline styles

Curious about how to swap the positions of these two divs?

Unable to expand or collapse rows in ng-table

Ways to access a global ArrayList in a separate method