The value from the table is different using Xpath and CSS selectors

Question

Test url=https://www.cricbuzz.com/live-cricket-scorecard/22585/aus-vs-nz-1st-odi-new-zealand-tour-of-australia-2020

I am trying to get the title of a table using the below code:

Code snippet:

WebElement SecondItable = driver.findElement(By.xpath("//div[@id='innings_2']//div[@class='cb-col cb-col-100 cb-ltst-wgt-hdr'][1]"));
String TeamInnings2 = SecondItable.findElement(By.xpath("//div[@class='cb-col cb-col-100 cb-scrd-hdr-rw']//child::span[1]")).getText();
String TeamInnings1 = SecondItable.findElement(By.cssSelector("div[class='cb-col cb-col-100 cb-scrd-hdr-rw'] span:nth-child(1)")).getText();
System.out.println(TeamInnings2);
System.out.println(TeamInnings1);

The output value in TeamInnings2 and TeamInnings1 are different (as given below):


Test Results

When I removed the SecondITable reference and used the entire path (as given below), the xpath is giving the current results. String TeamInnings2 = driver.findElement(By.xpath("//div[@id='innings_2']//div@class='cb-col cb-col-100 cb-ltst-wgt-hdr'//div[@class='cb-col cb-col-100 cb-scrd-hdr-rw']//child::span1")).getText();

I am very new to Selenium. Can anyone explain me why the results are different when the xpath and css selectors are pointing to the same element? Why the xpath is giving correct results with the entire path but not with the table reference?

enter image description here

enter image description here

• SelfLearner: Hi PDHide... Thank you very much for the prompt response. But my question is when the span [1] and nth-child(1) are pointing to the same element why the values are different? However, when I tried with span[0], I got the error as -"Cannot locate an element using xpath=//div[@class='cb-col cb-col-100 cb-scrd-hdr-rw']//child::span[0]" Could you please tell me the changes I have to do so that the results of xpath matches with css. In my case, the css selector retrieved the correct results.
• SelfLearner: I have added the chropath snapshots of the element locators using xpath and css for your quick reference.
• PDHide: ignore the comment you were right , child::span starts with 1 to , i didn't notice the 'child' in your locator. I thought its just a array. I will see why u get 2 different answers .
• PDHide: You are using //div this will start the search from any where in the HTML , instead use ./div . so String TeamInnings2 = SecondItable.findElement(By.xpath("./div[@class='cb-col cb-col-100 cb-scrd-hdr-rw']//child::span[1]")).getText();

Answer 1

You are using the below xpath:

"//div[@class='cb-col cb-col-100 cb-scrd-hdr-rw']//child::span[1]"

as you are using //div , the xpath search will start for div element from anywhere in HTML and not from the parent SecondItable as you expected.

To search for div under parent SecondItable use below xpath:

"./div[@class='cb-col cb-col-100 cb-scrd-hdr-rw']//child::span[1]"

Here we used ./ instead of //, telling XPath to search from current node which his the SecondItable

so final will look like:

WebElement SecondItable = driver.findElement(By.xpath("//div[@id='innings_2']//div[@class='cb-col cb-col-100 cb-ltst-wgt-hdr'][1]"));
String TeamInnings2 = SecondItable.findElement(By.xpath("./div[@class='cb-col cb-col-100 cb-scrd-hdr-rw']//child::span[1]")).getText();
String TeamInnings1 = SecondItable.findElement(By.cssSelector("div[class='cb-col cb-col-100 cb-scrd-hdr-rw'] span:nth-child(1)")).getText();
System.out.println(TeamInnings2);
System.out.println(TeamInnings1);

Note:

String TeamInnings2 = SecondItable.findElement(By.xpath("./div[@class='cb-col cb-col-100 cb-scrd-hdr-rw']//child::span[1]")).getText();

The above locator will find a div element which is immediate child to parent eg secoditable>div but it will not find secoditable>li>div as div is not a immediate child.

So use :

String TeamInnings2 = SecondItable.findElement(By.xpath(".//div[@class='cb-col cb-col-100 cb-scrd-hdr-rw']//child::span[1]")).getText();

here .// ensures that the xpath searchs for div under parent but not just for immediate child.

• SelfLearner: My friend, PDHide... Brilliant analysis.... Thanks a lot! I really appreciate your time and help in resolving this issue. You are the man to go in the time of crisis..
• SelfLearner: I need one more help from you. I have used the above logic (./div) for two more fields, but I am facing the following error. My code: String Ext = SecondItable.findElement(By.xpath("./div[text()='Extras']/following-sibling::div[1]")).getText(); String ActualSc = SecondItable.findElement(By.xpath("./div[text()='Total']/following-sibling::div")).getText(); errors: Cannot locate an element using xpath=./div[text()='Extras']/following-sibling::div[1] Cannot locate an element using xpath=./div[text()='Total']/following-sibling::div[1]
• PDHide: ./div identifies immediate child under the parent , use .// instead so . will ensure that it searching from parent and // esures that anywhere under parent
• PDHide: Updated the answer, could you accept the answer by clicking the tick sign near to my answer . Thanks happy to help
• SelfLearner: I am very new to this website so I was not aware that I had to accept the answer. I have accepted the answer now.