Why doesn't my XPath find my element on the page?

Question

I am trying to retrieve the content of the header and each chapter which is a repetitive structure as you can see below. For this am using Selenium and C#.

My attempt, using xpath, is this:

string xpath = "//article[@class='shared__reader__xx reader__container__content'][4]/div[@class='chapter xx'][1]"; // this should take the 5th chapter
var elem = GetElementBy(By.XPath(xpath), webDriver, 5); 

where GetElementBy is based on the following method:

public static IWebElement GetElementBy(By by, IWebDriver webDriver, int seconds)
        {
            WebDriverWait webdriverWait = new WebDriverWait(webDriver, TimeSpan.FromSeconds(seconds));  // e.g. 5
            IWebElement searchElement = webdriverWait.Until(x => x.FindElement(by));
            return searchElement;
        }

and the html is:

<div class="container__right">
    <article class="shared__reader__xx reader__container__content" lang="en">
        <div class="chapter xx" data-chapternumber="0" style="display: none;">
            <h1>Header ... </h1>
            <div class="chapter__content">
                <p>xx.</p>
                <p>xx</p>
                <ul>
                    <li>xx</li></ul>
            </div>
        </div>
        <div class="chapter xx" data-chapternumber="1" style="display: block;">
            <h1>Header ... </h1>
            <div class="chapter__content">
                <p>xx.</p>
                <p>xx</p>
                <ul>
                    <li>xx</li></ul>
            </div>
        </div>
        <div class="chapter xx" data-chapternumber="2" style="display: none;">
            <h1>Header ... </h1>
            <div class="chapter__content">
                <p>xx.</p>
                <p>xx</p>
                <ul>
                    <li>xx</li></ul>
            </div>
        </div>
etc

I get the following error and I don't understand why:

Timed out after 1 seconds ---> OpenQA.Selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":"//article[@class='shared__reader__xx reader__container__content'][4]/div[@class='chapter xx'][1]"}

I should add that only 1 chapter is visible on the page, at once, in case that is a problem, but I think I was trying in my example to display a visible chapter, the 5th and last one, after parsing through all of them.

Later edit: I changed string xpath to "article[@class='shared__reader__xx reader__container__content'][4]/div[@class='chapter xx'][1]"; Same error. According to MSDN: x[1]/y[2] means: The second <y> child of the first <x>. And considering chapterxx element shows up once under each reader__xx element ...

What am I doing wrong?

Answer 1

I think that your class selector for multi-class div is the thing that breaks it. Try

//div[contains(@class, 'shared__reader__xx') and contains(@class, 'reader__container__content')]

What is more, this line is trying to find 4th article element with class X and Y, but I think you only have one.

//article[@class='shared__reader__xx reader__container__content'][4]

I presume you are looking for something more like this:

"//div[contains(@class, 'shared__reader__xx') and contains(@class, 'reader__container__content')]/div[@class='chapter xx'][5]";

or

"//div[contains(@class, 'shared__reader__xx') and contains(@class, 'reader__container__content')]/div[@data-chapternumber='4']";

Answer 2

Why [4]?

Shouldn't it be: string xpath = "//article[@class='shared__reader__xx reader__container__content'][1]/div[@class='chapter xx'][1]";

Answer 3

These kinds of issues are generally faced by automation engineers while automating web applications. We used to discuss such issues in our Automation strategy meeting and found their solutions.

You can try the following locators to overcome such errors:

//article[@class='shared__reader__xxreader__container__content']/div[@class='chapter xx']

In case, there are multiple occurrences of 'shared__reader__xx reader__container__content' class, you have to use the fourth occurrence. Then, you should try:

(//article[@class='shared__reader__xxreader__container__content'])[4]/div[@class='chapter xx']

Other locators, you can try:

 //article[@class='shared__reader__xxreader__container__content']/div[@data-chapternumber='0']



//article[contains(@class, 'shared__reader__xx') and contains(@class,'reader__container__content')]/div[@class='chapter xx']

Hope this information will help you. Thanks!!!!