Just wondering how to get the span text out of this div when using selenium in python.
<div class="clsFrameworkElement"
id="ManagedQuestionViewer.brdrQuestion1.QuestionRenderer.MultiChoiceQuestionViewer.sp.StackPanel.RadioTextRegionViewer2.LayoutRoot.Panel.text.sp.rich.LayoutRoot.TextBlock" style="overflow: visible; display: inherit; text-shadow: white 0px 1px; left: 46px; top: 105px; border-width: 0px; width: 186px; height: 15px; text-align: left; color: rgb(0, 0, 0); font-family: Tahoma; font-weight: normal; font-size: 9.6pt; text-overflow: clip; overflow-wrap: break-word; white-space: normal; user-select: none;">
<span style="">Get a non-disclosure agreement.</span>
</div>
Thanks.
You can use xpath to get the span element.
Please see below snippet:
from selenium import webdriver
driver = webdriver.Chrome()
html_content = """
<html>
<head></head>
<body>
<div class="clsFrameworkElement" id="ManagedQuestionViewer.brdrQuestion1.QuestionRenderer.MultiChoiceQuestionViewer.sp.StackPanel.RadioTextRegionViewer2.LayoutRoot.Panel.text.sp.rich.LayoutRoot.TextBlock" style="overflow: visible; display: inherit; text-shadow: white 0px 1px; left: 46px; top: 105px; border-width: 0px; width: 186px; height: 15px; text-align: left; color: rgb(0, 0, 0); font-family: Tahoma; font-weight: normal; font-size: 9.6pt; text-overflow: clip; overflow-wrap: break-word; white-space: normal; user-select: none;">
<span style="">Get a non-disclosure agreement.</span>
</div>
</body>
</html>
"""
driver.get("data:text/html;charset=utf-8,{html_content}".format(html_content=html_content))
node = driver.find_element_by_xpath("//div[#class='clsFrameworkElement']/span")
print(node.text)
This will print :
Get a non-disclosure agreement.
You can read more about xpath here: https://selenium-python.readthedocs.io/locating-elements.html
Related
I'm trying to get text using selenium web driver and here is my code.
PYTHON SCRIPT:
Gives the output as empty string
text_value=driver.find_element_by_xpath('//*[#id="root"]/div/div/div/div[2]/div/div[3]/div[1]/div[2]/span[2]').text
print(text)
text_value=driver.find_element_by_xpath('//span[2]').text
print(text)
USING JAVASCRIPT:
Gives the output as NONE
text_value=driver.find_element_by_xpath('//*[#id="root"]/div/div/div/div[2]/div/div[3]/div[1]/div[2]/span[2]')
value=driver.execute_script('arguments[0]. textContent;',text_value)
print(value)
text_value=driver.find_element_by_xpath('//*[#id="root"]/div/div/div/div[2]/div/div[3]/div[1]/div[2]/span[2]')
value=driver.execute_script('arguments[0]. innerText;',text_value)
print(value)
EXPECT RESULT IS : 1/15
Below is the HTML CODE:
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=0,maximum-scale=1,minimum-scale=1"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet"><script type="text/javascript" async="" src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"></script><script src="https://cdn.ravenjs.com/3.19.1/raven.min.js" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.min.js"></script><title>Youplus</title><link href="/static/css/2.44e3516d.chunk.css" rel="stylesheet"><link href="/static/css/main.c166110d.chunk.css" rel="stylesheet"><script src="https://cdn.logrocket.io/logger.min.js" async=""></script><style data-emotion=""></style></head><body style="background-color: white;" class=""><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div style="height: 100%;"><div style="height: 100%;"><div style="height: 100%; background: white;"><div style="width: 100%; height: 64px; position: fixed; background: white; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 15px; z-index: 2;"><img src="/static/media/logo.4c1dd824.png" class="logo-study center-vertical" alt="Youplus Logo" style="position: absolute; cursor: pointer; height: 36px; padding-left: 20px;"><span class="center-vertical" style="font-family: "Open Sans"; font-size: 16px; font-weight: normal; color: rgb(101, 101, 101); position: relative; right: 12px; float: right; margin-right: 20px;">Logout</span></div><div><div class="ui stackable mobile vertically reversed equal width grid" style="margin-top: 0px;"><div class="column" style="height: 100%; z-index: 1; padding-top: 200px; margin-left: 50px;"><div style="width: 100%; height: 100%; position: relative;"><div style="position: relative; height: 100%;"><div style="width: 100%; position: relative;"><img id="studyMediaImage" class="study-media-image center-horizontal" src="https://ind-ypassets.s3.amazonaws.com/images/studies/2019-09-12_120919_PyKZG4jd2o0.jpg" style="width: 100%; max-width: inherit; height: 25vw; max-height: inherit; object-fit: scale-down; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; background: white;"><div style="margin-top: 20px;"></div></div></div></div></div><div class="computer only one wide column" style="height: 100%; z-index: 1;"><div class="center-horizontal" style="width: 1px; height: 30vw; background-color: rgb(166, 166, 166); margin-top: 150px; position: absolute;"></div></div><div class="column" style="height: 100%; bottom: 0px; right: 0px; background: white; transition: height 0.5s ease 0s;"><div style="width: 100%; margin-top: 85px; margin-bottom: 40px; position: absolute;"><div class="ui huge header" style="position: absolute; left: -110%; font-size: 20px; text-align: left; margin-top: 0px; font-family: "Open Sans"; font-weight: bold; margin-left: 0px; margin-right: 10em;">1. When you think about buying liquor at the store, what comes to mind?</div><div style="text-align: right; margin-right: 50px;"><span style="font-size: 14px; font-weight: bold; font-family: "Open Sans"; margin-right: 10px;">Question</span><span style="font-size: 14px; font-weight: bold; font-family: "Open Sans"; background: rgb(204, 204, 204); padding: 2px 6px;">1/15</span></div></div>
ATTACHING THE IMAGE HERE. CLICK HERE TO VIEW
To get the value from Span element induce WebDriverWait and visibility_of_element_located() and following xpath.Try below options.
Using Text:
print(WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH,"//span[text()='Question']/following::span[1]"))).text)
OR
print(WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH,"//span[contains(.,'Question')]/following::span[1]"))).text)
Using Attribute innerHTML:
print(WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH,"//span[contains(.,'Question')]/following::span[1]"))).get_attribute("innerHTML"))
Using Attribute textContent:
print(WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH,"//span[contains(.,'Question')]/following::span[1]"))).get_attribute("textContent"))
You need below imports to execute above code.
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
I'm using the vis.js library and most things work. Like when I manually style the elements with the "style" tag however when I use the class attribute the styles are not applied.
The SVG element
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="420px" height="165px">
<foreignObject x="0" y="0" width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" style="background-color: #fff;height: 100%, width: 100%; display: flex; padding: 8px; border-radius: 10px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); box-sizing: border-box;">
// This doesn't work
<div style="flex: 1;">
<h1 class="testyh1">Report Id</h1>
<h2 style="margin: 0; font-size: 14px; font-weight: 400; line-height: normal;">1</h2>
</div>
// This works
<div style="flex: 1;">
<h1 style="color: #0481E2; margin-top: 0; margin-bottom: 3px; font-size: 12px; line-height: normal;">Report Name</h1>
<h2 style="margin: 0; font-size: 14px; font-weight: 400; line-height: normal;">Medicine-Stock</h2>
</div>
</div>
</foreignObject>
</svg>`;
CSS
.testyh1 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: 12px;
line-height: normal;
}
I use style tag and update these in HTML page with script tag:
<style type="text/css">
#mynetwork {
margin: auto;
width: 1000px;
height: 800px;
border: 1px solid lightgray;
}
</style>
I'm having problems with my code. I have a fixed menu bar that works as it should but it doesn't resize when I change the size of the window. I need it to resize because if you change the window size, it will will not scroll horizontally and some buttons are cut off. How can I fix this?
Also feel free to make optimization or input on unnecessary code
Thanks
body {
margin: 0px;
padding: 0px;
background: url(images/gradient.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
section {
margin: 0 auto;
border: 1px solid #000000;
border-radius: 8px;
background:#E5E7E9;
width: 958px;
height: 800px;
}
.bpic {
width: 200px;
height: 350px;
margin: 0px;
}
.biopic {
border: 2px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 350px;
margin: 40px 40px 40px 375px;
}
.bio {
margin: 40px;
font-family: verdana;
text-align: center;
}
#biography {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#assignments {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#projects {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#contact {
font-family: arial black;
font-size: 100%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
.email {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 150px;
height: 96px;
margin: 3px 40px 3px 400px;
}
.banner {
width: 960px;
height: 143px;
margin: 0 auto;
padding: 0px;
background: url(images/banner.png) no-repeat;
}
.banner h2 {
font-family: vollkorn;
font-size: 350%;
color: white;
text-transform: uppercase;
margin: 0;
position: relative;
top: -40%;
left: 83%;
transform: translate(-50%, -50%);
}
.menu {
list-style-type: none;
margin: auto;
background-color: #333;
width: 100%;
background: url(images/menu.jpg) repeat-x;
position: fixed;
min-width: 1080px;
z-index: 1;
display: inline-block;
}
.menu ul {
float: left;
margin: 0px;
padding: 0 0 0 30%;
list-style: none;
}
.menu ul li {
padding: 0px;
display: inline;
}
.menu ul li a {
position: relative;
float: center;
display: inline-block;
height: 30px;
width: 180px;
text-align: center;
padding: 12px 0 0 0;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline: none;
min-height: 24px;
}
.menu li a:hover, .menu li .current {
position: relative;
color: #ffffff;
background: url(images/menuhoverright.jpg) top right no-repeat;
}
.menu li a:hover span, .menu li .current span {
position: absolute;
display: inline-block;
width: 15px;
height: 42px;
top: 0;
left: 0;
background: url(images/menuhoverleft.jpg) no-repeat;
}
.jprop {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 195px;
margin: 40px;
}
.jprop:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<!-- Homepage
My Biography Page
Author:
Date: 01/29/2017
-->
<meta charset="UTF-8" />
<title>Homepage</title>
<script src="modernizr-1.5.js"></script>
<link href="homestyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<img src="images/menu.jpg" alt="menu" />
<ul>
<li><span></span>Biography</li>
<li><span></span>Assignments</li>
<li><span></span>Projects</li>
<li><span></span>Contact</li>
</ul>
</div>
<div class="banner">
<img src="images/banner.png" alt="banner" />
<h2>K V</h2>
</div>
<section>
<div id="biography">
<a name="biography"><h1>Biography</h1>
</div>
<div class="biopic">
<img src="images/biopic.jpg" width="230" height="490" alt="biopic" class="bpic"/>
</div>
<article>
<div class="bio">
<p>Hello, my name is &&&&&&. --
</p>
<p>I am currently pursuing my A.S. degree in computer information technology at?I plan to start
working in the field of IT, once I obtained my A.S. degree and certifications. While working, I plan on
continuing my education to obtain my bachelor’s degree in IT at UCF. I have always had a passion for
technology, especially computers. To be able to work in the field that I enjoy is one of my life goal.
</p>
</div>
</article>
</section>
<br>
<section>
<div id="assignments">
<a name="assignments"><h1>Assignments</h1>
</div>
<div class="jprop">
<a href="Jprop/basic.html">
<img src="images/jprop.JPG" alt="jprops">
</a>
</div>
</section>
<br>
<section>
<div id="projects">
<a name="projects"><h1>Projects</h1>
</div>
</section>
<br>
<section style="max-height: 210px;">
<div id="contact">
<a name="contact"><h1>Contact</h1>
</div>
<div class="email">
<a href="mailto:REDACTED">
<img src="images/email.png" alt="emails">
</a>
</div>
</section>
<br>
</body>
</html>
This bit of css from your style sheet is going to keep the menu from resizing below 1080px. So it will be too wide for many tablets and phones for example.
.menu {
min-width: 1080px;
}
Remove the min-width property, and see if that fixes it for you.
I am having problems with the z-index. I am trying to get the button link to display overtop of the image, but it just isn't seeming to work. The image below shows how I am wanting it to look.
Here is the HTML:
<div class="featured">
<img src="images/featured.png" alt="Featured Image">
<div class="button-2">
Buy Now
</div>
</div>
Here is the CSS:
.featured img
{
float: left;
z-index: -1;
}
.button-2
{
-moz-box-shadow:inset 0px 1px 0px 0px #940c00;
-webkit-box-shadow:inset 0px 1px 0px 0px #940c00;
box-shadow:inset 0px 1px 0px 0px #940c00;
background-color:#8b0101;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:43px;
line-height:43px;
width:135px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #810e05;
float: left;
}
.button-2 a
{
color: #fff;
font-size: 20px;
letter-spacing: 2px;
}
.button-2:hover
{
background-color:#6c0301;
}
.button-2:active
{
position:relative;
top: 1px;
}
This is what is displaying: http://imgur.com/XungDOU
This is what I want it to do: http://imgur.com/XHXTKae
Try this:
.button-2{
position: absolute;
left:50%;
top:50%;
z-index:99}
I'd like to have the caption text stay the same width as the image (without setting one fixed width). I've tried playing around with , etc., but that's even harder to control.
Here's a sample of the CSS. Hope this is the proper way to ask questions here!
<head>
<style type="text/css">
<!--
#floatrightphoto {
float:right;
padding: 6px;
margin-left: 2px;
margin-top: 3px;
margin-bottom: 2px;
margin-right: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCEE77;
border-right-color: #AFE165;
border-bottom-color: #AFE165;
border-left-color: #CCEE77;
background-color: #CCFF99;
}
#floatrightphoto p{
font-weight: normal;
color: #889260;
float: left;
margin-bottom: -3px;
margin-top: 0px;
margin-right: 1px;
margin-left: 0px;
text-align: right;
font-family: "Comic Sans MS", Ariel;
font-style: oblique;
font-size: 14px;
line-height: 16px;
position: static;
display: inherit;
}
body {
width: 750px;
}
-->
</style>
</head>
<body>
<div id="floatrightphoto">
<img src="somephoto" width="180" height="180">
<br>
<p>Caption Caption Caption Caption Caption Caption Caption
Caption Caption</p>
</br>
</img>
</div>
</body>
Whoa that's a whole lotta extra fluff. I'm looking for the same solution.
I came across this solution (modified to reflect what you are wanting):
#img-right{display: table; min-width: 1px; float:right; margin-left: 10px;}
#img-right p {display: table-caption; caption-side: bottom;}
However, this works in most all browsers except IE where in IE my #img-right spans the full width of the caption (the caption being longer than the image itself and it doesn't wrap). I am still trying to figure out how to make IE behave, as it works perfectly in other browsers.
As for your other code, I suggest simplifying it a bit to reduce load time. I modified your CSS a little bit...I'd suggest renaming the ID's to be smaller and easier to read, please, don't EVER use Comic Sans... ever. :)
body { width: 750px; }
#img-right {
float:right;
padding: 6px;
margin: 3px 2px 2px 0px;
border-top: 1px solid #ccee77;
border-left: 1px solid #ccee77;
border-bottom: 1px solid #afe165;
border-right: 1px solid #afe165;
background: #ccff99;
}
#img-right p{
font: italic 14px/16px Helvetica, Arial, Lucida Sans, Verdana;
color: #889260;
float: left;
margin: 0px 0px -3px 1px;
text-align: right;
}