When I access the website and log-in manually, it works well.
However, when I use selenium webdriver and try to log in, this login slide bar shows, so I can't log in.
This is my code as followed.
id = driver.find_element_by_css_selector('#TPL_username_1').send_keys("prayjung50")
pw = driver.find_element_by_xpath('//*[#id="TPL_password_1"]').send_keys("xxxxxxxxxxxx")
time.sleep(10)
login = driver.find_element_by_xpath('//*[#id="J_SubmitStatic"]').click()
This is the image of the website as followed.
This is the website code of slide bar as followed.
<!-- use new slide checkcode -->
<div id="nocaptcha" class="nc-container tb-login nc-tm-min-fix" data-nc-idx="1" style="display: block;">
<div id="nc_1_wrapper" class="nc_wrapper">
<div id="nc_1_n1t" class="nc_scale">
<div id="nc_1__bg" class="nc_bg"></div>
<span id="nc_1_n1z" class="nc_iconfont btn_slide"></span>
<div id="nc_1__scale_text" class="scale_text slidetounlock"><span class="nc-lang-cnt" data-nc-lang="_startTEXT" data-spm-anchor-id="a2107.1.0.i0.3e3e11d9wfV1qj">请按住滑块，拖动到最右边</span></div>
<div id="nc_1_clickCaptcha" class="clickCaptcha" style="top: -202px; height: 380px; min-height: 0px;">
<div class="clickCaptcha_text">
<b id="nc_1__captcha_text" class="nc_captch_text"></b>
<i id="nc_1__btn_2" class="nc_iconfont nc_btn_2 btn_refresh"></i>
</div>
<div class="clickCaptcha_img"></div>
<div class="clickCaptcha_btn"></div>
</div>
<div id="nc_1_imgCaptcha" class="imgCaptcha" style="top: -202px; height: 339px; min-height: 0px;">
<div class="imgCaptcha_text"><input id="nc_1_captcha_input" maxlength="6" type="text" style="ime-mode:disabled"></div>
<div class="imgCaptcha_img" id="nc_1__imgCaptcha_img"></div>
<i id="nc_1__btn_1" class="nc_iconfont nc_btn_1 btn_refresh" onclick="document.getElementById('nc_1__imgCaptcha_img').children[0].click()"></i>
<div class="imgCaptcha_btn">
<div id="nc_1__captcha_img_text" class="nc_captcha_img_text"></div>
<div id="nc_1_scale_submit" class="nc_scale_submit"></div>
</div>
</div>
<div id="nc_1_cc" class="nc-cc"></div>
<i id="nc_1__voicebtn" tabindex="0" role="button" class="nc_voicebtn nc_iconfont" style="display:none"></i>
<b id="nc_1__helpbtn" class="nc_helpbtn"><span class="nc-lang-cnt" data-nc-lang="_learning">了解新功能</span></b>
</div>
<div id="nc_1__voice" class="nc_voice"></div>
</div>
</div>"a2107.1.0.i0.3e3e11d9wfV1qj">请按住滑块，拖动到最右边</span>
Related
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<section class="home">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{% static 'img/slide-1.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-2.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-3.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</body>
</html>
custom.css
.carousel-item {
height: 24rem;
background: #000;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 100%;
opacity: 0.5;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption{
bottom: 25%;
}
.carousel-caption h5{
font-size: 30px;
margin-bottom: 20px;
}
.carousel-caption p{
font-size: 20px;
}
To make testing easier i added some grey color to the background (you can remove it later).
What I think you are missing, is to add the Bootstrap scripts, you can see the code for an example.
Here you have how to do it, from Bootstrap documentation.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
>>>>>>>>>> SCRIPTS HERE <<<<<<<<<<<<<
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
>>>>>>>>>>> UP HERE <<<<<<<<<<<<<<<<<
<title></title>
</head>
<body style="background-color: gray">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="IMAGE 1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
Regarding your question about "where" to put the text, after the images will be ok.
Here you have a working example (from one of my portfolio projects):
<!-- Testimonials -->
<section id="testimonials" class="colored-section">
<div id="testimonials-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active container-fluid">
<h2 class="testimonial-text">I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonials-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#testimonials-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
</html>
Please, mark the answer as accepted ;)
below things worked for me
<div class="carousel-caption d-block">
Instead of
<div class="carousel-caption d-none d-md-block">
read here display properties
My html looks like this:
<div class="row">
<div class="col-md-7">
<ul class="breadcrumb">
<li id="get_data">Get data</li>
<li id="sampling_task">Sampling</li>
<li id="confirm_task">Confirmation</li>
</ul>
<div class="container-fluid">
<form action="#" method="post" enctype="multipart/form-data" role="form" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="id_fileA" class="col-sm-3 control-label" style="text-align: left">
Select dataset A<span class='required_label'>*</span>
</label>
<div class="col-sm-9">
{{ form.fileA|attr:"class:form-control" }}
</div>
</div>
<div class="form-group"></div>
<div class="form-group">
<label for="id_fileB" class="col-sm-3 control-label" style="text-align: left">
Select dataset B<span class='required_label'>*</span>
</label>
<div class="col-sm-9">
{{ form.fileB|attr:"class:form-control" }}
</div>
</div>
<div class="form-group"></div>
<div class="form-group" id="sample_btn" style="display: none">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="button" name="theButton" id="sample-step" value="Start Sampling" class="btn btn-success btn-large disabled" style="border-radius: 5px;">
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3" id="sample_msg" style="display: none;">
<p id="sample_text" style="font-size: medium">
Some ABCD message
</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3" id="get_sample_confirm_msg" style="display: none;">
<p>
<input type="button" style="height: 40px; width: 140px; border-radius: 5px" name="YesButton" id="accept-step" value="Accept & Continue" class="btn btn-success disabled">
<input type="button" style="height: 40px; width: 140px; border-radius: 5px" name="NoButton" id="cancel-step" value="Cancel Sampling" class="btn btn-danger disabled">
</p>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-5">
</div>
</div>
The backend is a javascript and on button click, it do processing and if something fails the javascript code update the message.
var error = "<div class='alert alert-danger'><p>We encountered an error while sampling: <br /><strong>Sampling failed!!</strong></p>"; error += "<p>Please <a href='mailto:abcd#gmail.com'>contact us</a> if this error persists.</p>";
error += "</div>";
$('#sample_msg').html(error);
Now, in my selenium code if I do this:
sample_msg = self.driver.find_element_by_id('sample_msg')
I get an empty list result. What I want is to do is read the error in the "sample_msg" class if any and I have tried few things but its not working out. Help is appreciated. Thanks.
If you want to get access to hidden text you might need to use below code:
sample_msg = self.driver.find_element_by_id('sample_msg').get_attribute('textContent').strip()
Note that text property allows to get text from visible elements only
As you are trying to extract the error message Some ABCD message it is contained within a <p> tag which have parent <div> tag with style attribute set as display: none;. So to extract the text you can use the following code block :
element = driver.find_element_by_xpath("//div[#class='form-group']/div[#id='sample_msg']")
driver.execute_script("arguments[0].removeAttribute('style')", element)
print(driver.find_element_by_xpath("//div[#class='form-group']/div[#id='sample_msg']/p").get_attribute("innerHTML"))
So, you have to wait for sometime after clicking the button and once some message appears then you need to extract that message.
Try below:-
WebDriverWait wait = new WebDriverWait(webDriver, timeoutInSeconds);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id));
or
wait.until(ExpectedConditions.elementToBeClickable(By.id));
to be precise.
See also:
org.openqa.selenium.support.ui.ExpectedConditions for similar shortcuts for various wait scenarios.
org.openqa.selenium.support.ui.WebDriverWait for its various constructors.
You can check the python syntax also on the above links.
I am writing scripts for automating login action with credentials . I followed the standard process of finding the element through name , class , xpath . The input fields are not taking the credentials . I tried giving time interval of 10 seconds in between each process , still the issue continues.
Below I have attested the code .
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support.select import Select
from selenium.webdriver.common.keys import Keys
import time
driver = webdriver.Firefox()
driver.get() #WEBSITE HERE
time.sleep(10)
elem = driver.find_element_by_xpath('//*[#id="ssousernameUI"]')
elem.clear()
elem.send_keys() # USERNAME HERE
elem.send_keys(Keys.RETURN)
time.sleep(10)
passwd = driver.find_element_by_xpath('//*[#id="password"]')
passwd.clear()
passwd.send_keys() #PASSWORD HERE
passwd.send_keys(Keys.RETURN)
time.sleep(10)
login = driver.find_element_by_link_text("Login")
login.click()
ERROR MESSAGE :
Traceback (most recent call last):
File "/home/think201/PycharmProjects/pat/pat-cbt/login.py", line 13,
in <module>
elem = driver.find_element_by_xpath('//*[#id="ssousernameUI"]')
File "/usr/local/lib/python3.5/dist-packages/selenium/webdriver/remote/webdriver.py", line 368, in find_element_by_xpath
return self.find_element(by=By.XPATH, value=xpath)
File "/usr/local/lib/python3.5/dist-packages/selenium/webdriver/remote/webdriver.py", line 858, in find_element
'value': value})['value']
File "/usr/local/lib/python3.5/dist-packages/selenium/webdriver/remote/webdriver.py", line 311, in execute
self.error_handler.check_response(response)
File "/usr/local/lib/python3.5/dist-packages/selenium/webdriver/remote/errorhandler.py", line 237, in check_response
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: Unable to
locate element: //*[#id="ssousernameUI"]
HTML code
<form name="loginForm" action="https://login.asdfghjk.in/oam/server/auth_cred_submit" target="_top" id="loginForm" method="POST">
<!-- Taksh End -->
<input name="ipRandomValue" value="709381701517861" id="ipRandomValue" type="hidden"><input name="deviceTypeHidden" value="Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0" id="deviceTypeHidden" type="hidden">
<input name="ssousername" value="" id="ssousername" type="hidden">
<input name="hashnumber" value="" id="hashnumber" type="hidden">
<!-- Start mainWrapper -->
<div class="overlay"></div>
<div style="top: 20%;left: 50%;position: fixed;z-index: 5;color: white;display:none;" class="wait">
<h1>Please wait...</h1>
</div>
<div class="overlay1"></div>
<div class="mainWrapper">
<!-- Start Header -->
<!-- End Header -->
<!-- Start Middle Container -->
<article class="midContainer">
<div class="container">
<div class="breadcrums">
<p>You are here:</p>
<ul>
<li>Home</li>
<li class="last"> Login</li>
</ul>
</div>
<h1> Login</h1>
<section class="RHSsection standardWide">
<div class="pageWrap">
<div class="loginWrp">
<div class="box vfAcc">
<!-- displaying error message -->
<div class="cl c414042 bold fnt16"><p style="color:red;margin-left:10px;"><br><strong class="errMsgClass"></strong></p></div>
<div class="cl c414042 bold fnt16" id="SrvError"></div>
<div style="display:none;" class="cl c414042 bold fnt16 lockClass"><p style="color:red;margin-left:10px;"><br><strong>Your account is locked since it is
not used for a long time. Please click here to activate it</strong></p></div>
<!-- displaying error message end -->
<h3 class="accor">Login to manage your Account <span class="drop"></span></h3>
<div class="setWrp">
<div class="row">
<label>Enter your username or mobile number</label>
<div class="inputArea">
<div class="inputFieldBox">
<input name="ssousernameUI" autocomplete="off" class="login_input width255" value="" onfocus="if
(this.value==this.defaultValue)this.value='';" id="ssousernameUI" onblur="if(this.value=='')this.value=this.defaultValue;" type="text">
<div class="error_msg"></div>
</div>
</div>
</div>
<div class="row">
<label>Enter your password</label>
<div class="inputArea">
<div class="inputFieldBox">
<input name="password" autocomplete="off" id="password" class="login_input width255" onkeydown="if ((event.keyCode ==
13) && (document.getElementById('ssousernameUI').value!='') && (document.getElementById('passwordsrv').value!='')){LoginValidation();}" onblur="if(this.value=='')this.value=this.defaultValue;" value="" onfocus="if
(this.value==this.defaultValue)this.value='';" type="password">
<div class="error_msg"></div>
</div>
</div>
</div>
<div class="row">
<div class="checkboxBtn"> <span class="uncheked"></span>
<input name="checkbox" id="RememberMe" type="checkbox">
<label for="RememberMe"> Remember Me </label>
</div>
<div class="forgot"> Forgot your password?</div>
</div>
Login<!-- Add Here : Taksh -->
<!-- <div class="col orline"><span class="or">Or</span></div>
<ul class="smoShare">
<li class="facebook">Facebook</li>
<li class="gplus">Google Plus</li>
</ul> -->
</div>
</div>
<div class="box myvf">
<h3 class="accor">Why should I register ? <span class="drop"></span></h3>
<div class="setWrp">
<p>Here are 5 great reasons! </p>
<ul class="redbult">
<li>Simplified, dashboard view of voice & Internet usage</li>
<li> Easy update of profile & contact info</li>
<li> Quick change of voice & plans</li>
<li> Hassle-free access to old bills & statements of accounts</li>
<li> Instant activation/deactivation of services</li>
</ul>
<p>It takes just a few moments!</p>
Register Now
</div>
</div>
<div class="box vfApp">
<h3 class=""> App</h3>
<div class="">
<div class="vfappSlide">
<div class="owl-vfapp owl-carousel owl-theme owl-loaded">
<!-- <div class="apps"> <img src="/images/appimages/windows_logo.jpg" alt="" />
<p>Manage your account on the go !</p>
<div class="getNow"><a onclick="ga('send', 'event', 'My Account', 'Click', 'Windows - Get Now'); utag.link({ Custom_Links : 'MyAccount: Login: windows App - Get Now' });" href="http://qwertyu" class="purpleBtn">Get Now</a> </div>
</div>
<div class="apps"> <img src="/images/appimages/blackberry_logo.png" alt="" />
<p>Manage your Vodafone account on the go !</p>
<div class="getNow"><a onclick="ga('send', 'event', 'My Account', 'Click', 'Blackberry - Get Now'); utag.link({ Custom_Links : 'MyAccount: Login: Blackberry App - Get Now' });" href="http://qwerty" class="purpleBtn">Get Now</a> </div>
</div>
<div class="apps"> <img src="/images/appimages/nokia_ovi_logo.jpg" alt="" />
<p>Manage your account on the go !</p>
<div class="getNow"><a onclick="ga('send', 'event', 'My Account', 'Click', 'OVI - Get Now'); utag.link({ Custom_Links : 'MyAccount: Login: Ovi App - Get Now' });" href="http://qwertyu" class="purpleBtn">Get Now</a> </div>
</div>
<div class="apps"> <img src="/images/appimages/java_logo.jpg" alt="" />
<p>Manage your account on the go !</p>
<div class="getNow"><a onclick="ga('send', 'event', 'My Account', 'Click', 'Java - Get Now');utag.link({ Custom_Links : 'MyAccount: Login: Java App - Get Now' });" href="http://qwertyui" class="purpleBtn">Get Now</a> </div>
</div> -->
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-837px, 0px, 0px); transition: all 0.25s ease 0s; width: 1674px;"><div class="owl-item cloned" style="width: 279px; margin-right: 0px;"><div class="apps"> <img alt="" src="/images/appimages/android_logo1.jpg">
<p>Manage your Vodafone account on the go !</p>
<div class="getNow">Get Now </div>
</div></div><div class="owl-item cloned" style="width: 279px; margin-right: 0px;"><div class="apps"> <img alt="" src="/images/appimages/apple_logo1.jpg">
<p>Manage your Vodafone account on the go !</p>
<div class="getNow">Get Now </div>
</div></div><div class="owl-item" style="width: 279px; margin-right: 0px;"><div class="apps"> <img alt="" src="/images/appimages/android_logo1.jpg">
<p>Manage your Vodafone account on the go !</p>
<div class="getNow">Get Now </div>
</div></div><div class="owl-item active" style="width: 279px; margin-right: 0px;"><div class="apps"> <img alt="" src="/images/appimages/apple_logo1.jpg">
<p>Manage your account on the go !</p>
<div class="getNow">Get Now </div>
</div></div><div class="owl-item cloned" style="width: 279px; margin-right: 0px;"><div class="apps"> <img alt="" src="/images/appimages/android_logo1.jpg">
<p>Manage your account on the go !</p>
<div class="getNow">Get Now </div>
</div></div><div class="owl-item cloned" style="width: 279px; margin-right: 0px;"><div class="apps"> <img alt="" src="/images/appimages/apple_logo1.jpg">
<p>Manage your account on the go !</p>
<div class="getNow">Get Now </div>
</div></div></div></div><div class="owl-controls"><div class="owl-nav"><div class="owl-prev" style="display: none;">prev</div><div class="owl-next" style="display: none;">next</div></div><div style="" class="owl-dots"><div class="owl-dot"><span></span></div><div class="owl-dot active"><span></span></div></div></div></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</article>
<!-- End Middle Container -->
</div>
<!-- End mainWrapper -->
</form>
NoSuchElementException is because webdriver is not able to find the element in the webpage. Check if there are any frames in the webpage. Switch to it, if any.
You will need to click the element to get that element to focus and then enter username/password details.
If that also does not work try wrapping your find element statement with explicit wait.
Let me know if that helps.
EDIT1:
elem.click();
elem.send_keys();
time.sleep(50);
EDIT2:
Instead of:
elem = driver.find_element_by_xpath('//*[#id="ssousernameUI"]')
you can try:
driver.find_element_by_xpath('//*[#id="ssousernameUI"]').click()
For the first look, it seems that you xpath is not a correct one.
Instead of using:
elem = driver.find_element_by_xpath('//*[#id="ssousernameUI"]')
Try this:
elem = driver.find_element_by_xpath("//*[#id='ssousernameUI']")
As per the HTML you have shared to fill up the credentials you can use the following code block :
from selenium import webdriver
driver = webdriver.Firefox()
driver.get("your_website") #WEBSITE HERE
username = driver.find_element_by_xpath("//input[#id='ssousernameUI']").click()
username.clear()
username.send_keys("user_name") # USERNAME HERE
password = driver.find_element_by_xpath("//input[#id='password']").click()
password.clear()
password.send_keys("Pa$$w0rd") #PASSWORD HERE
driver.find_element_by_xpath("//a[#class='purpleBtn' and contains(.,'Login')]").click()
Thank You . I resolved it .
The website had multiple login pages , hence they have used iframe to suffice the Login access in multiple pages.
The issue was , the login was inside a iframe . I referred to the documentation for switching through frame.
I used
driver.switch_to_frame("frameName")
Thank you #Arun Prakash and everyone.
So in upgrading from DevExpress to DevExtreme, DE seems to have gone out of their way to block any automation engine but their own.
Select boxes are build as a layer of custom DIV tags with a read-only input tag in the middle.
When selected, the dropdown list is generated as a DIV list structure tied to the /body/ level of the page source.
This list unloads when the dropdown list closes.
Waitr can see and interact with the list the first time it appears on the page, but once it unloads I cannot get it to find it again.
I have tried Page Object references, native Watir dynamic references, nothing works.
Interestingly I do not get the common 'no longer attached to the DOM' error, just an empty string.
All of the workarounds from DevExpress have been deactivated or blocked.
Has anyone found a way to automate these controls besides exposed JS calls?
Select Box:
<div class="dx-texteditor dx-dropdowneditor-button-visible dx-widget dx-textbox dx-dropdowneditor-field-clickable dx-dropdowneditor dx-selectbox dx-validator dx-visibility-change-handler" id="Active_Y_or_N" typeof="drpdown" validations="[{"type":"required"}]" value="1" items="[{"Value":1.0,"Text":"Yes","DropDownType":"Active Y or N"},{"Value":2.0,"Text":"No","DropDownType":"Active Y or N"}]" originalvalue="1">
<div onclick="void(0)" class="dx-dropdowneditor-input-wrapper dx-selectbox-container">
<div class="dx-texteditor-container">
<input id="Active_Y_or_N_1" aria-expanded="false" role="combobox" tabindex="0" spellcheck="false" readonly="" aria-autocomplete="list" aria-haspopup="true" autocomplete="off" class="dx-texteditor-input" type="text">
<div class="dx-placeholder dx-state-invisible" data-dx_placeholder="Select..."></div>
<div class="dx-texteditor-buttons-container">
<div role="button" onclick="void(0)" class="dx-widget dx-button-normal dx-dropdowneditor-button">
<div class="dx-dropdowneditor-icon"></div>
</div>
</div>
</div>
</div>
List:
<div style="width: 212px; height: 61px; z-index: 1001; margin: 0px; left: 0px; top: 0px; transform: translate(264px, 365px); transition: none 0s ease 0s ; visibility: visible; opacity: 1;" class="dx-overlay-content dx-popup-normal dx-popup-draggable dx-resizable">
<div style="height: 60px;" id="2ceea1a1-35ca-5e1d-72c1-17ca0c70daa9" class="dx-popup-content">
<div aria-activedescendant="3cc4c726-d65a-4248-b16c-6cd8ed666d08" tabindex="-1" role="listbox" class="dx-scrollable dx-scrollview dx-scrollable-customizable-scrollbars dx-scrollable-vertical dx-scrollable-simulated dx-visibility-change-handler dx-list dx-widget dx-collection" id="2779756d-884a-7d65-dd53-5ab194255698">
<div class="dx-scrollable-container">
<div style="transform: translate(0px, 0px);" class="dx-scrollable-content">
<div class="dx-scrollview-top-pocket">
<div style="display: none;" class="dx-scrollview-pull-down">
<div class="dx-scrollview-pull-down-image"></div>
<div class="dx-scrollview-pull-down-indicator">
<div class="dx-loadindicator dx-widget">
<div class="dx-loadindicator-wrapper">
<div class="dx-loadindicator-content">
<div class="dx-loadindicator-icon">
<div class="dx-loadindicator-segment dx-loadindicator-segment7"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment6"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment5"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment4"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment3"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment2"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment1"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment0"></div>
</div>
</div>
<div class="dx-loadindicator-content"></div>
</div>
</div>
</div>
<div class="dx-scrollview-pull-down-text">
<div style="opacity: 1;">Pull down to refresh...</div>
<div style="opacity: 0;">Release to refresh...</div>
<div style="opacity: 0;">Refreshing...</div>
</div>
</div>
</div>
<div onclick="void(0)" class="dx-scrollview-content">
<div id="3cc4c726-d65a-4248-b16c-6cd8ed666d08" aria-selected="false" role="option" class="dx-item dx-list-item dx-state-focused">
<div class="dx-item-content dx-list-item-content">Yes</div>
</div>
<div aria-selected="false" role="option" class="dx-item dx-list-item">
<div class="dx-item-content dx-list-item-content">No</div>
</div>
</div>
<div class="dx-scrollview-bottom-pocket">
<div style="display: none;" class="dx-scrollview-scrollbottom">
<div class="dx-scrollview-scrollbottom-indicator">
<div class="dx-loadindicator dx-widget">
<div class="dx-loadindicator-wrapper">
<div class="dx-loadindicator-content">
<div class="dx-loadindicator-icon">
<div class="dx-loadindicator-segment dx-loadindicator-segment7"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment6"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment5"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment4"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment3"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment2"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment1"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment0"></div>
</div>
</div>
<div class="dx-loadindicator-content">
</div>
</div>
</div>
</div>
<div class="dx-scrollview-scrollbottom-text">Loading...</div>
</div>
</div>
</div>
<div style="display: none;" class="dx-scrollable-scrollbar dx-widget dx-scrollbar-vertical dx-scrollbar-hoverable">
<div style="transform: translate(0px, 0px); height: 58px;" class="dx-scrollable-scroll dx-state-invisible">
<div class="dx-scrollable-scroll-content"></div>
</div>
</div>
</div>
<div class="dx-scrollview-loadpanel dx-overlay dx-widget dx-visibility-change-handler dx-state-invisible dx-loadpanel">
<div aria-hidden="true" style="width: 222px; height: 90px;" class="dx-overlay-content"></div>
</div>
code (one version anyway):
self.send("#{field}_element").div(:class => 'dx-dropdowneditor-icon').click
drpdwn = #browser.div(:class => 'dx-scrollview-content')
if drpdwn.text.include? value
drpdwn.div(:text => value).click
else
fail "value (#{value}) not found in list (#{self.drop_list_element.text})"
end
It is very hard to answer because I can't see your code and I have no example. So maybe it's a wrong answer. But if your statement:
On the second load of the list, Watir can see it as existing, but not visible.
is correct. Then you can force watir to work with not visible elements using:
browser.hidden(id: "your_element").click
Try it please.
Facing the issue when the code is executed in test script. the same code executes fine in irb
#browser.div(:class=>/DownArrowButton/).when_present.click #works fine, dropdown
popup = #browser.div(:id=>'pgObjectSelector_Popover')
popup.text_fields(:id=>/dijit_form_TextBox_/).select{|s| s.visible?}[0].when_present.set('ethernet')
While setting the key the widget gets closed with an error:
Element is not currently visible and so may not be interacted with
[remote server] file:///C:/Users/suchanna/AppData/Local/Temp/webdriver-profile20150319-30448-a96p5v/extensions/fxdriver#googl
ecode.com/components/command-processor.js:8991:in `fxdriver.preconditions.visible'
Please help me out for the above problem
Html:
<div id="pgObjectSelector_Popover" class="xwtPopover dijitTooltipDialog xwt_BasePickerPopover dijitTooltipABLeft dijitTooltipBelow" wairole="presentation" widgetid="pgObjectSelector_Popover" style="top: 0px; display: none;">
<div class="dijitTooltipContainer" data-dojo-attach-event="onkeypress: _onKey" wairole="dialog" waistate="labelledby-pgObjectSelector_Popover_title" data-dojo-attach-point="_outsideContainer" style="">
<table class="xwtPopoverMenuBar" cellspacing="0" cellpadding="0" data-dojo-attach-point="menuBar" wairole="presentation"></table>
<div class="xwtPopoverPadding" data-dojo-attach-point="_paddingContainer">
<div class="dijitTooltipContents dijitTooltipFocusNode" tabindex="-1" data-dojo-attach-point="_scrollBox" style="overflow-x: hidden;">
<table class="xwtPopoverTable" wairole="presentation">
<tbody>
<tr>
<td wairole="presentation">
<div class="xwtPopoverContainer" wairole="presentation" tabindex="-1" data-dojo-attach-point="containerNode">
<div id="dijit_layout_BorderContainer_0" class="dijitBorderContainerNoGutter dijitContainer dijitLayoutContainer" widgetid="dijit_layout_BorderContainer_0" style="padding: 0px; width: 275px; height: 300px;">
<div id="dijit_layout_ContentPane_1" class="dijitContentPane dijitBorderContainerNoGutter-child dijitBor…nerNoGutterPane dijitAlignCenter dijitContentPaneSingleChild" widgetid="dijit_layout_ContentPane_1" style="left: 0px; top: 0px; position: absolute; width: 275px; height: 300px;">
<div id="pgObjectSelector_osInstance" class="xwtobjectselector" minheight="100" minwidth="220" data-dojo-attach-point="osNode" widgetid="pgObjectSelector_osInstance" style="cursor: default; width: 273px; height: 298px;">
<div id="xwt_widget_objectselector__Titlebar_0" class="xwtOsTitlebar" minwidth="100" data-dojo-attach-point="titleBar" widgetid="xwt_widget_objectselector__Titlebar_0"></div>
<div class="xwtobjectselectorcontents xwtOSDataReady" data-dojo-attach-point="osContents">
<div class="xwtObjectSelectorToolbars" data-dojo-attach-point="toolbars">
<div id="xwt_widget_objectselector__ObjectSelectorToolbar_0" class="xwtOsToolbar" data-dojo-attach-point="ButtonToolbar" minwidth="100" data-dojo-type="xwt.widget.toolbar.LayoutToolbar" widgetid="xwt_widget_objectselector__ObjectSelectorToolbar_0" style="display: none;"></div>
<div id="xwt_widget_filtertoolbar_FilterToolbar_0" class="xwtFilterToolbar" widgetid="xwt_widget_filtertoolbar_FilterToolbar_0" style="width: 273px;">
<div class="xwtFilterbarLeft" data-dojo-attach-point="SearchLeftGroup"></div>
<div class="xwtFilterbarCenter" data-dojo-attach-point="SearchCenterGroup">
<div class="xwtFilterSearchIcon icon-cisco-search" title="Search" tabindex="0" data-dojo-attach-point="searchButton">
<div class="xwt-ButtonSearchTextHighContrast" data-dojo-attach-point="searchTextHighCont"></div>
<span class="xwtFilterSearchText" data-dojo-attach-point="searchText"></span>
</div>
<span class="dijit dijitReset dijitInline xwtFilterDownButton xwtFilterDownIcon xwtFilterbarDropdownOff" widgetid="dijit_form_DropDownButton_3">
<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-point="_buttonNode" data-dojo-attach-event="ondijitclick:__onClick"></span>
<input class="dijitOffScreen" type="button" aria-hidden="true" role="presentation" data-dojo-attach-point="valueNode" data-dojo-attach-event="onclick:_onClick" tabindex="-1" value=""></input>
</span>
<div id="widget_dijit_form_TextBox_1" class="dijit dijitReset dijitInline dijitLeft xwtFilterSearchBox dijitTextBox" role="presentation" widgetid="dijit_form_TextBox_1" style="width: 185px;">
<div class="dijitReset dijitInputField dijitInputContainer">
<input id="dijit_form_TextBox_1" class="dijitReset dijitInputInner" type="text" autocomplete="off" data-dojo-attach-point="textbox,focusNode" tabindex="0" value=""></input>
<span class="dijitPlaceHolder dijitInputField">
Search All
</span>
</div>
</div>
<div class="xwtFilterClearIcon" data-dojo-attach-event="ondijitclick: _clearIconClicked" tabindex="0" data-dojo-attach-point="closeButton"></div>
<div class="xwtClear"></div>
</div>
<div class="xwtFilterbarRight" data-dojo-attach-point="SearchRightGroup"></div>
<div class="xwtAdvFilterButton" data-dojo-attach-point="advancedFilter"></div>
<div class="xwtClear"></div>
</div>
<div id="dijit_layout_ContentPane_0" class="dijitContentPane xwtOsScopeTabs" dolayout="true" minwidth="100" data-dojo-type="dijit/layout/ContentPane" data-dojo-attach-point="scopeTabs" widgetid="dijit_layout_ContentPane_0"></div>
<div id="xwt_widget_objectselector__SelectionDisplayBar_0" class="xwtOsSelectionBar" minwidth="100" data-dojo-attach-point="selectionBar" widgetid="xwt_widget_objectselector__SelectionDisplayBar_0" style="width: 268px;"></div>
</div>
<div id="dijit_layout_StackContainer_0" class="xwtobjectselectorview dijitStackContainer dijitContainer dijitLayoutContainer xwtOSDataReady xwtOsStackContainer" dolayout="true" data-dojo-attach-point="containerNode" widgetid="dijit_layout_StackContainer_0" style="width: 273px; height: 214px;"></div>
</div>
<div class="resizeHandleBoth" data-dojo-attach-point="resizeHandleAP" style="display: none;"></div>
<div class="xwtOsFooter"></div>
<div class="xwtOsLeftShadow"></div>
<div class="xwtOsRightShadow"></div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="xwtPopoverFooter" data-dojo-attach-point="footer"></div>
</div>
<!--
Added connector attach point
-->
<div class="dijitTooltipConnector" data-dojo-attach-point="connector" wairole="presentation" style="left: 8px;"></div>
<div class="xwtPopoverLoader icon-spinner icon-spin" data-dojo-attach-point="loader" style="bottom: 139.333px; left: 153.5px; display: none;"></div>
</div>
</div>
Ok, first at all, if you need to set any text to this field, you can make div with:
id => 'pgObjectSelector_Popover' with JavaScript, using execute_script: #browser.execute_script("document.getElementById('pgObjectSelector_Popover').style.display = 'block';"), after, this pop-up have just one text_field so, you can do: #browser.div(pgObjectSelector_Popover).text_field.set 'ethernet'
Second,
#browser.div(:class=>/DownArrowButton/).when_present.click
#browser.div(:id=>'pgObjectSelector_Popover').text_field.set 'ethernet'