Extract span text by next element using CSS Selector

Question

I have this piece of html

<div class="crtoolbar" style="display:inline-block;height:26px;width:1080px;top:0px;left:0px;">
    <table cellspacing="0" cellpadding="0">
        <tbody>
            <tr nowrap="">
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl01" title="Print" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/print.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/print_over.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/print.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl04" disabled="disabled" title="First" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/firstd.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/firstd.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/firstd.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="4">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl05" disabled="disabled" title="Prev" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/prevd.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/prevd.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/prevd.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl06" title="Next" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/next.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/next_over.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/next.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl07" title="Last" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/last.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/last_over.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/last.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="4">&nbsp;</td>
                <td nowrap="" valign="middle" align="center" width="60px">
                    <span style="display:inline-block;width:60px;">1&nbsp;/&nbsp;5</span>
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="40px">
                    <input name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl09" type="text" title="Go To" class="crtoolbartextbox" onkeypress="if ((event.which &amp;&amp; event.which == 13) || (event.keyCode &amp;&amp; event.keyCode == 13)) { document.getElementById('ctl00_ContentPlaceHolder1_CrystalReportViewer1_ctl02_ctl10').click(); return false;}" style="height:16px;width:40px;">
                </td>
                <td nowrap="" width="1">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl10" id="ctl00_ContentPlaceHolder1_CrystalReportViewer1_ctl02_ctl10" title="Go To" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/gotopage.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/gotopage_over.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/gotopage.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="95px">
                    <input name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl13" type="text" title="Find" class="crtoolbartextbox" onkeypress="if ((event.which &amp;&amp; event.which == 13) || (event.keyCode &amp;&amp; event.keyCode == 13)) { document.getElementById('ctl00_ContentPlaceHolder1_CrystalReportViewer1_ctl02_ctl14').click(); return false;}" style="height:16px;width:95px;">
                </td>
                <td nowrap="" width="1">&nbsp;</td>
                <td nowrap="" width="22px">
                    <input type="image" name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl14" id="ctl00_ContentPlaceHolder1_CrystalReportViewer1_ctl02_ctl14" title="Find" src="/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/search.gif" onmouseover="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/search_over.gif'" onmouseout="this.src='/aspnet_client/system_web/2_0_50727/CrystalReportWebFormViewer3/images/toolbar/search.gif'" style="height:22px;width:22px;border-width:0px;">
                </td>
                <td nowrap="" width="8">&nbsp;</td>
                <td nowrap="" width="">
                    <select name="ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl15" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl15\',\'\')', 0)" title="Zoom" class="crtoolbarlist" style="height:22px;">
                        <option value="25">25%</option>
                        <option value="50">50%</option>
                        <option value="75">75%</option>
                        <option selected="selected" value="85">85%</option>
                        <option value="100">100%</option>
                        <option value="125">125%</option>
                        <option value="150">150%</option>
                        <option value="200">200%</option>
                        <option value="300">300%</option>
                        <option value="400">400%</option>
                    </select>
                </td>
                <td nowrap="" width="100%"></td>
            </tr>
        </tbody>
    </table>
</div>

And I need to rely on this element using css selector

.FindElementByCss("[name='ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl07']")

Here's a snapshot of the desired part of span tag which is needed to extract

So finally I need to extract the number just before the </span></td> and here it is 5 as shown

You've got some contradictory information in your question. The locator you want to use is `...ctl02$ctl09` but in your screenshot you have `...ctl02$ctl07` circled. You should clarify what you want. — JeffC, Dec 10 '18 at 17:56
Thanks a lot for reply and sorry for confusion. I have edited the question — YasserKhalil, Dec 10 '18 at 18:01

QHarr · Answer 1 · 2018-12-10T18:44:44.510

2

You can use an attribute = value selector of

[style='display:inline-block;width:60px;']

Then use split or replace to get the 5 after the /

The same info is also present elsewhere and you can use class selector of

.crtoolbar

Then split the innerText of that:

Split(element.innerText, Chr$(32))(2)

That last one will be faster than any xpath (unless using very old IE version in which case may be faster or about same.

edited Dec 10 '18 at 18:44

answered Dec 10 '18 at 18:32

QHarr

83,427
12
54
101

There is another way as well. One moment. – QHarr Dec 10 '18 at 18:43

JeffC · Accepted Answer · 2018-12-10T18:09:38.513

1

There are several ways to do this. I'll list a few XPaths and you can pick the one that suits your purposes the best.

Find the SPAN in the nav panel that contains "/"

//div[@class='crtoolbar']//span[contains(.,'/')]

Find the SPAN after the Last button (using title="Last")

//input[@title='Last']//following::span[1]

Find the SPAN after the Last button (using name, as you requested)

//input[@name='ctl00$ContentPlaceHolder1$CrystalReportViewer1$ctl02$ctl07']//following::span[1]

All of these will return "1 / 5". From there, you can just split that string by " / " and take the second part to get your "5" or whatever the second number happens to be.

BTW, I'm all for CSS selectors but you can't use one here because the locator you are wanting to use as an anchor is in a different branch of the DOM. Using XPath here will let you either find the element by contained text, like "/", or by DOM navigation, e.g. "following::*", etc.

edited Dec 10 '18 at 18:09

answered Dec 10 '18 at 18:04

JeffC

22,180
5
32
55

I've tested all these given the HTML you provided and they all work. There may be some that aren't specific enough, etc. due to other HTML on the page that wasn't provided but I'm guessing they will all be good. – JeffC Dec 10 '18 at 18:11
What dot refers to in that part `span[contains(.,'/')]`? – YasserKhalil Dec 10 '18 at 18:16
1

It's similar to `text()` but different. See [this](https://stackoverflow.com/questions/38240763/xpath-difference-between-dot-and-text) – JeffC Dec 10 '18 at 18:20

Extract span text by next element using CSS Selector

2 Answers2