i am looking for a solution to get the second parent (div) of a known element and then get a child element with sub-childrens in selenium with python.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="p1">
<div class="p2">...</div>
<div class="p2">
<div class="p3">
<span class="target">b_Kunden</span>
</div>
</div>
<div class="p2">...</div>
<div class="p2">...</div>
<div class="p2">
<div class="p3">
<div class="p4">
<div class="p5">
<div class="p6">
<button type="button" class="b1">button i want to click</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p1">
<div class="p2">...</div>
<div class="p2">
<div class="p3">
<span class="target">different</span>
</div>
</div>
<div class="p2">...</div>
<div class="p2">...</div>
<div class="p2">
<div class="p3">
<div class="p4">
<div class="p5">
<div class="p6">
<button>some button</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p1">
<div class="p2">...</div>
<div class="p2">
<div class="p3">
<span class="target">different</span>
</div>
</div>
<div class="p2">...</div>
<div class="p2">...</div>
<div class="p2">
<div class="p3">
<div class="p4">
<div class="p5">
<div class="p6">
<button>some button</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am getting the element I am looking for with xpath and checking for a specific text ("b_Kunden")(working fine):
temp = browser.find_elements_by_xpath("//*[contains(text(), 'b_Kunden')]")[0]
** I cannot access it trough simple className etc. This is just
dummy HTML in environment I need to go up to p1 class from where span text is "b_Kunden" and then down to child element p6 to click the button inside it **
The reason for this is I need to press exactly the button of the section where the span text is b_Kunden. Because the amount of the sections is variable I cannot count and access them trough example: [1] operator for classes. I need to find the term "b_Kunden" and press the relate button in the p1 section to it.
I would be glad if someone could help me out on how to solve this issue.
Best regards,
Liam
This might help you (assuming that the 2nd parent you referred to is going backwards in heirarchy (higher up the DOM):
browser.find_elements_by_xpath("//*[contains(text(), 'b_Kunden')][1]//parent::div//parent::div")
UPDATE (code per the comment and html block provided by #Liam)
//*[text()='b_Kunden']//ancestor::div//button
Here is the HTML with DOM highlighted to the button. I hope this is what you are looking for.
HTML DOM highlighted snapshot
Related
The HTML is located below, If the span value is less than 20%, then I want to remove the span child up until the <div class="action"> parent only.
So for example:
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 5% </span>
</div>
</div>
</div>
</div>
From the above HTML, these code should only be removed:
<div class="action">
<div class="content">
<span class="content-name"> 5% </span>
</div>
</div>
So what should left is:
<div class="item">
<div class="info">
</div>
</div>
This is my current python code:
items = WebDriverWait(driver, 10).until(EC.visibility_of_all_elements_located((By.XPATH, "//span[#class='content-name']")))
for item in items:
percentage_text = re.findall("\d+", item.text)[0]
if int(percentage_text) <= 20:
driver.execute_script("arguments[0].remove();", item)
But it only removes the span class and not its parent.
Here is the full HTML, I think it needs javascript to remove elements but I am very new on javascript I researched for more than 2 hours and I still can't find solutions. Thank you very much.
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 5% </span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 95% </span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 32% </span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 15% </span>
</div>
</div>
</div>
</div>
get to the parent of the parent:
driver.execute_script("arguments[0].parentElement.parentElement.remove();", item)
I know the very basics of using following-siblings but here I have a situation where it looks a bit more complicated.
I want to find the element with text Total 6.5 where the header is Total games. How can I do it with following-siblings and contains text?
<div class="group">
<div class="header_1">
<div class="section_1">
<div class="expander"></div>
<div class="star"></div>
<div class="text_3">Total games</div>
</div>
</div>
<div class="body_1">
<div class="horizontal">
<div class="grid">
<div class="row_common">
<div class="cell_wrap">
<div class="cell_align_wrap">
<div class="common_text">Total 6.5</div>
</div>
</div>
</div>
<div class="row_common">
...
</div>
</div>
</div>
</div>
</div>
This one should locate required element
//div[#class="header_1" and contains(., "Total games")]/following-sibling::div[#class="body_1"]//div[#class="common_text"]
you can also simplify it as
//div[#class="header_1" and contains(., "Total games")]/following::div[#class="common_text"]
Requirement:
/html/body/div[3]/div[4]/div/div[7]/div/div/div/div/p/b - Contains word "TITLE"
/html/body/div[3]/div[4]/div/div[8]/div/div/div/div/p - Contains "This is my description"
Actual HTML:
<div class="secadvheading section">
<div class="section-custom">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p class="mt-15"><b>TITLE</b></p>
</div>
</div>
</div>
</div>
</div>
<div class="paragraphText parbase section">
<div class="section-custom ">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p>This is my desciption</p>
</div>
</div>
</div>
</div>
Question:
How to get text content paragraph text after "TITLE" div?
Tried
driver.find_element_by_xpath("//*[contains(text(),'TITLE')]/following-sibling::p")
didn't worked. I may have multiple "TITLE in same page" how can i gracefully look for TITILE div (multiple elements) and get the description for the same?
You need to go out of TITLE's node first--go to ancestor node the use following-sibling. Try this:
//b[text()='TITLE']/ancestor::div[#class='secadvheading section']/following-sibling::div[#class='paragraphText parbase section']//p
I have a simple HTML/CSS file:---
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="Creator" content="Aakash Gupta">
<meta name="From YouTube" content="Easy Tutorials">
<title>Complete Website Design</title>
<link rel="stylesheet" type="text/css" href="../static/tutorial_website.css">
</head>
<body>
<section class="header">
<div class="container">
<img src="../static/tutorial/images/logo.png" class="logo">
<div class="header-text"><h2>Tell me and I forget. Teach me and I remember.<br>Involve me and I learn’<br>–Benjamin Franklin</h2>
<br>
<span class="square"></span>
<p>
In 2014, India’s global education ranking slipped to 93. This, together with a series of scams faced by the Indian education sector, calls for an immediate need to bring reforms in our education system. Indian Education System has been synonymous with ‘Examinations’, ‘Board Exams’, ‘Entrance Exams’, ‘Marks’, etc.
</p>
<button class="common-btn">Read More</button>
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</div>
</div>
</section>
<nav id="side-nav">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>FEATURES</li>
<li>COURSES</li>
<li>OFFER</li>
<li>CONTACT</li>
</ul>
</nav>
<img src="../static/tutorial/images/menu.png" id="menu-btn">
<!--about-->
<section class="about">
<div class="about-left-col">
<img src="../static/tutorial/images/about.png">
</div>
<div class="about-right-col">
<div class="about-text">
<h1>About Us</h1>
<p>
We are a consultancy that helps organisations achieve exceptional results by finding and applying practical solutions to complex business and people challenges. We interrupt existing patterns of thinking and instigate powerful, sustainable change.
</p>
<h2>One learns from books and example only that certain things can be done. Actual learning requires that you do those things.</h2>
<h3>---Frank Herbert</h3>
</div>
</div>
</section>
<!--FEATURES-->
<section class="features">
<div class="features-row">
<div id="features-col">
<img src="../static/tutorial/images/pic-1.png">
<h4>Learn Anywhere</h4>
<p>Switch between your computer,tablet or mobile device</p>
</div>
<div id="features-col">
<img src="../static/tutorial/images/pic-2.png">
<h4>Expert Teachers</h4>
<p>Learn from industry experts who are passionate about teachinhg</p>
</div>
<div id="features-col">
<img src="../static/tutorial/images/pic-3.png">
<h4>Unlimited Access</h4>
<p>Choose what you'd like to learn from out extensive subscription library</p>
</div>
</div>
</section>
<div class="features-btn">
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
<button class="common-btn">Start Free Trial</button>
</div>
<!--courses-->
<section class="courses">
<div class="container-course-row">
<div class="course-left-col">
<div class="course-text">
<h1>Browse our Top<br>Courses</h1>
<span class="square"></span>
<p>C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of the C programming language, or "C with Classes". The language has expanded significantly over time, and modern C++ now has object-oriented, generic, and functional features in addition to facilities for low-level memory manipulation. </p>
<button class="common-btn">View all Courses</button>
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="course-right-col">
<img src="../static/tutorial/images/course.png">
</div>
</div>
</section>
<!--offer-->
<section class="Offer">
<div class="about-left-col">
<img src="../static/tutorial/images/offer.png">
</div>
<div class="about-right-col">
<div class="about-text">
<h1>Limitless learning,<br>Limitless possibilities</h1>
<p style="margin: 20px 0">
We are a consultancy that helps organisations achieve exceptional results by finding and applying practical solutions to complex business and people challenges
</p>
<span class="square"></span>
<br>
<button class="common-btn" style="margin: 25px 0">Start Free Trial</button>
<br>
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</section>
<!--Contact-->
<section id="contact">
<div class="container-contact-row">
<div class="contact-left-col">
<h1>Sign Up to join our<br>learning community</h1>
<form>
<input type="text" placeholder="Enter Name">
<input type="email" placeholder="Enter e-mail">
<input type="password" placeholder="Enter password">
<div class="btn-box">
<button class="common-btn">Sign-up</button>
<button class="common-btn">Start Free Trial</button>
</div>
</form>
<div class="line" style="padding-left: 40px;">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</div>
<div class="contact-right-col">
<img src="../static/tutorial/images/contact.png">
</div>
</div>
</section>
<section class="footer">
<div class="container-footer-row">
<hr>
<div class="footer-left-col">
<div class="footer-links">
<div class="link-title">
<h4>Product</h4>
<small>Our Plan</small><br>
<small>Free Trial</small>
</div>
<div class="link-title">
<h4>About Us</h4>
<small>Request Demo</small><br>
<small>FAQs</small>
</div>
<div class="link-title">
<h4>Support</h4>
<small>Features</small><br>
<small>Contact Us</small>
</div>
<div class="link-title">
<h4>Explore</h4>
<small>Find a nonprofit</small><br>
<small>Coporate Solution</small>
</div>
</div>
</div>
<div class="footer-right-col">
<div class="footer-info">
<div class="copyright">
<small>support#Xypo.com</small><br>
<small>copyright 2020 Xypo</small>
</div>
<div class="footer-logo">
<img src="../static/tutorial/images/logo.png">
<button class="common-btn">English</button>
</div>
</div>
</div>
</div>
</section>
<!--icons-->
<div class="social-icons">
<img src="../static/tutorial/images/facebook.png">
<img src="../static/tutorial/images/instagram.png">
<img src="../static/tutorial/images/twitter.png">
<img src="../static/tutorial/images/linkedin.png">
</div>
<script type="text/javascript">
var menubtn = document.getElementById("menu-btn");
var sidenav = document.getElementById("side-nav");
sidenav.style.right= "-250px";
menubtn.onclick = function(){
if (sidenav.style.right == "-250px"){
sidenav.style.right="0";
}
else{
sidenav.style.right="-250px";
}
}
</script>
</body>
</html>
Flask:--
from flask import Flask
from flask import request,render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('Tutorial_website.html')
if __name__ == '__main__':
app.run(debug=True)
I have tried to follow all the rules(as far as i know) like keeping html file in "templates" folder and css file and other images in "static" folder! But still CSS and other images are not visible on the website!
The directory structure is like this:
python programs\
first_template.py
templates\
Tutorial_website.html
static\
tutorial_website.css
tutorial\
images\
...
What am I missing?
Edit: I managed to get the photos visible but CSS in still not applying instead of CSS and images both being in the same folder i.e. "Static"!
Try linking your CSS like this:
<link rel="stylesheet" href="{{ url_for('static', filename='tutorial_website.css') }}>
From:
<body>
<div id="header">
<a id="logo">Foo</a>
</div>
<div id="search">
...
</div>
</body>
To:
<body>
<div id="header">
<a id="logo">Foo</a>
<!-- inside #header now -->
<div id="search">
...
</div>
</div>
</body>
Is this doable with Genshi?