使用CSS选择器按下一个元素提取跨度文本

时间:2018-12-10 17:35:49

标签: excel vba selenium web-scraping css-selectors

我有这段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>

我需要使用CSS选择器来依赖此元素

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

以下是span标签所需部分的快照,需要提取该快照 enter image description here

所以最后我需要提取</span></td>之前的数字,这里是5,如图所示

2 个答案:

答案 0 :(得分:2)

您可以使用

的attribute =值选择器
[style='display:inline-block;width:60px;']

然后使用split或replace在/

之后获得5

其他地方也存在相同的信息,您可以使用的类选择器

.crtoolbar

然后拆分该内容的innerText:

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

最后一个将比任何xpath都快(除非使用非常旧的IE版本,在这种情况下可能会更快或更基本)。

答案 1 :(得分:0)

有几种方法可以做到这一点。我将列出一些XPath,您可以选择最适合您目的的一个。

在包含“ /”的导航面板中找到SPAN

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

在“最后一个”按钮之后找到SPAN(使用title =“ Last”)

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

在“最后一个”按钮后找到SPAN(根据您的要求使用名称)

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

所有这些都将返回“ 1/5”。从那里,您可以将字符串用“ /”分割,然后使用第二部分得到您的“ 5”或第二个数字碰巧的数字。

顺便说一句,我全都是CSS选择器,但是您不能在这里使用一个,因为您要用作定位器的定位器位于DOM的另一个分支中。在这里使用XPath可以让您通过包含的文本(例如“ /”)或DOM导航(例如, “以下:: *”,等等。