How select class , div , tag in splinter?

Question

I am trying to understand splinter functionalities, i tried to find on web but i couldn't found good documentation with pratical examples on splinter so i asked few questions here so that it will help beginner who are trying to learn splinter :

First i am confuse what is actual css selector in splinter , there are two method i see everywhere :

browser.find_by_css() 

or

browser.find_by_css_selector()

What is the difference between them and why the second one is not working in current splinter ?

Now My original question is how to select any tag which is under any class , how to select any tag which is under any id ?

I tried to find but i found most of stackoverflow questions on a splinter on "how to select option values in dropdown" , And splinter documentation is very good but the problem is they don't have practical sufficient examples for their methods.

So if i have this html code :

<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>

Then :

• How to select <p> tag data by selecting class="medium-widget success-story-category"

• second : How select "href" of first <li> tag

• third : How get text between first <li></li>

Now if there is <class_name id="something"> like :

<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>

• Now how to select : <nav id="mainnav" class="python-navigation main-navigation do-not-print" role="navigation"> with id using find_by_css method (not using find_by_id)

• How get <a> link using find_by_css

Answer 1

I have found my answer here i am going to explain so that it will help to other programmers :

First thing browser.find_by_css_selector() is not working and i used find_by_css method which worked perfectly so i prefer find_by_css method.

How to select <p> tag data by selecting class="medium-widget success-story-category"

We can select any class the format is :

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

we can select class class="medium-widget success-story-category" by div[class="medium-widget success-story-category"]

we can select

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

we can also find with :

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

or

when html is

`<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>`

by using :

`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)`

we can capture image which is in a class by

('div[class="image_class_name"] img') and then result["href" or "src"]

example :

suppose i have to select that image then i can get it by this code :

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

Next question is how to select

tag : we can select

tag usng nth-child(n) :

So if i have this html code :

<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>

Then we can select href link of any

by using

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

Please remember nth-child(2) in div[class="medium-widget success-story-category last"]:nth-child(1) doesn't select second nested div of this class instead nth-child(2) select second medium-widget success-story-category last class (as you can see there are two classes with same name medium-widget success-story-category last) .

Last answer of last question :

if there is <class_name id="something"> :

then select like

class_name[id="something"]