如何在 splinter 中选择 class 、 div 、 tag ？

Question

我正在尝试了解 splinter 的功能，我试图在网上找到，但我找不到关于 splinter 的实用示例的好的文档，所以我在这里问了几个问题，以便帮助正在尝试学习 splinter 的初学者：

首先我混淆了 splinter 中的实际 css 选择器是什么，我到处都能看到两种方法：

browser.find_by_css() 

或

browser.find_by_css_selector()

它们之间有什么区别，为什么第二个在当前的分裂中不起作用？

现在我最初的问题是如何选择任何类别下的任何标签，如何选择任何 id 下的任何标签？

我试图找到，但我发现了关于“如何在下拉列表中选择选项值”的碎片上的大多数 stackoverflow 问题，并且碎片文档非常好，但问题是他们没有足够实用的示例来说明他们的方法。

所以如果我有这个 html 代码：

<div class="medium-widget success-story-category">
                        <h2 class="widget-title"><span aria-hidden="true" class="icon-get-started"></span>Getting Started</h2>
<p>Python can be easy to pick up whether you're a first time programmer or you're experienced with other languages. The following pages are a useful first step to get on your way writing programs with Python!</p>
<ul>
    <li><a href="https://wiki.python.org/moin/BeginnersGuide/Programmers">Beginner's Guide, Programmers</a></li>
    <li><a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Beginner's Guide, Non-Programmers</a></li>
    <li><a href="https://wiki.python.org/moin/BeginnersGuide/Download">Beginner's Guide, Download &amp; Installation</a></li>
    <li><a href="https://wiki.python.org/moin/BeginnersGuide/Examples">Code sample and snippets for Beginners</a></li>
</ul>

                    </div>

然后：

• 如何通过选择class="medium-widget success-story-category"来选择<p>标签数据

• 第二个：如何选择第一个<li>标签的“href”

• 第三个：如何在第一个<li></li>之间获取文本

现在如果有<class_name id="something"> 喜欢：

<nav id="mainnav" class="python-navigation main-navigation do-not-print" role="navigation">


<ul class="navigation menu" role="menubar" aria-label="Main Navigation">



    <li id="about" class="tier-1 element-1   with-supernav" aria-haspopup="true">
        <a href="/about/" title="" class=" current_item selected selected">About</a>

• 现在如何选择：<nav id="mainnav" class="python-navigation main-navigation do-not-print" role="navigation"> with id using find_by_css 方法（不使用 find_by_id）

• 如何使用 find_by_css 获取<a> 链接

Answer 1

我在这里找到了答案，我将对其进行解释，以便对其他程序员有所帮助：

第一件事 browser.find_by_css_selector() 不起作用，我使用了 find_by_css 方法，效果很好，所以我更喜欢 find_by_css 方法。

如何通过选择class="medium-widget success-story-category"来选择<p>标签数据

我们可以选择任何格式的类：

div[class="class_name"] 或 div[any_style_element="value"]

我们可以选择班级 class="medium-widget success-story-category" 经过 div[class="medium-widget success-story-category"]

我们可以选择

标记('div[class="medium-widget success-story-category"] p')

我们也可以找到：

find_h=browser.find_by_css('div[class="medium-widget success-story-category last"]:nth-child(2)')

或

当html是

`<div class="row">

                    <div class="medium-widget success-story-category">
                        <h2 class="widget-title"><span aria-hidden="true" class="icon-get-started"></span>Getting Started</h2>
<p>Python can be easy to pick up whether you're a first time programmer or you're experienced with other languages. The following pages are a useful first step to get on your way writing programs with Python!</p>
<ul>
    <li><a href="https://wiki.python.org/moin/BeginnersGuide/Programmers">Beginner's Guide, Programmers</a></li>
    <li><a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Beginner's Guide, Non-Programmers</a></li>
    <li><a href="https://wiki.python.org/moin/BeginnersGuide/Download">Beginner's Guide, Download &amp; Installation</a></li>
    <li><a href="https://wiki.python.org/moin/BeginnersGuide/Examples">Code sample and snippets for Beginners</a></li>
</ul>

                    </div>

                    <div class="medium-widget success-story-category last">
                        <h2 class="widget-title"><span aria-hidden="true" class="icon-success-stories"></span>Friendly &amp; Easy to Learn</h2>
<p>The community hosts conferences and meetups, collaborates on code, and much more. Python's documentation will help you along the way, and the mailing lists will keep you in touch.</p>
<ul>
    <li><a href="/community/workshops/">Conferences and Workshops</a></li>
    <li><a href="http://docs.python.org">Python Documentation</a></li>
    <li><a href="/community/lists">Mailing Lists</a> and <a href="/community/irc/">IRC channels</a></li>
</ul>

                    </div>

                </div>`

通过使用：

`find_h=browser.find_by_css('div[class="row"]:nth-child(1) > div:nth-child(1) > p')
for i in find_h:
    print(i.text)`

我们可以通过以下方式捕获类中的图像

('div[class="image_class_name"] img') 然后result["href" or "src"]

示例：

假设我必须选择该图像，然后我可以通过此代码获取它：

find_h=browser.find_by_css('h1[class="site-headline"] img')
for i in find_h:
    print(i["src"])

下一个问题是如何选择

标签：我们可以选择

标签使用 nth-child(n) ：

所以如果我有这个 html 代码：

<div class="medium-widget success-story-category last">
                        <h2 class="widget-title"><span aria-hidden="true" class="icon-success-stories"></span>Friendly &amp; Easy to Learn</h2>
<p>The community hosts conferences and meetups, collaborates on code, and much more. Python's documentation will help you along the way, and the mailing lists will keep you in touch.</p>
<ul>
    <li><a href="/community/workshops/">Conferences and Workshops</a></li>
    <li><a href="http://docs.python.org">Python Documentation</a></li>
    <li><a href="/community/lists">Mailing Lists</a> and <a href="/community/irc/">IRC channels</a></li>
</ul>
                    </div>



<div class="medium-widget success-story-category last">
                        <h2 class="widget-title"><span aria-hidden="true" class="icon-success-stories"></span>Friendly &amp; Easy to Learn</h2>
<p>The community hosts conferences and meetups, collaborates on code, and much more. Python's documentation will help you along the way, and the mailing lists will keep you in touch.</p>
<ul>
    <li><a href="/community/workshops/">Conferences and Workshops</a></li>
    <li><a href="http://docs.python.org">Python Documentation</a></li>
    <li><a href="/community/lists">Mailing Lists</a> and <a href="/community/irc/">IRC channels</a></li>
</ul>
                    </div>

然后我们可以选择任意的href链接

通过使用

div[class="medium-widget success-story-category last"]:nth-child(1) > ul > li:nth-child(2) > a

请记住 div[class="medium-widget success-story-category last"]:nth-child(1) 中的 nth-child(2) 不会选择此类的第二个嵌套 div 而是 nth-child(2) 选择第二个 medium-widget success-story-category last 类（如您所见有两个具有相同名称的类medium-widget success-story-category last) .

最后一个问题的最后答案：

如果有<class_name id="something">：

然后选择喜欢

class_name[id="something"]