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 & 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
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 & 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 & 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 & 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 & 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"]