The concept of frames is being used on a website I am tasked with testing. However, the frames do not use frame tags, one is for example a div that is filled by GET/POST. Selenium cannot access the element inside of the frame (ElementNotVisibleException) because it must first switch to the frame. But, I can't switch to the frame because it is not technically a frame in Selenium's eyes. How can I access the content of the frame without manipulating the DOM? (The point of testing is that we test what is there as an end user and don't change it). So, I cannot use JavaScript executor. I have tried using action building to click elements/move to the element, but it returns errors.
EDIT:
Here is the basic form of the html I'm trying to access. I cannot use selenium to access any elements inside el1. I need to select an option for el6.
<div id="el1" style="width: 960px; height: 230px; margin-bottom: 6px;">
<div style="width: 955px;padding: 5px 0px 0px 5px;">
<span>Text Here</span>
<form id="el2" action="pageName.jsp?action=blah" method="POST" style="height: 300px;" name="el2">
<div id="el3" style="width: 600px; margin: 20px 0px 0px 60px;">
<div id="el4" style="height: 20px;">
<div id="el5" style="height: 20px; padding-left: 40px;">
<div style="width: 400px;">
<span style="font-weight: bold;">More Text Here</span>
</div>
<div style="width: 400px;">
<select id="el6" onchange="javascriptfunction(this)" name="el6" style="width: 400px;">
<option selected="selected" value="">A Select Box Option</option>
<option value="NumberHere">More Options Populated By JSP</option>
</select>
</div>
</div>
</div>
</div>
<!--Some Unnecessary content here-->
</form>
</div>
</div>
Here is style calculation for el6. I have tried manually adjusting height with WebDriver in attempt to get rid of ElementNotVisibleException. This did not work.
font-family MS Shell Dlg
body Helvetica,Arial,Sans-Serif
div Arial,Helvetica,Geneva,sans-serif
body Arial,Helvetica,Geneva,sans-serif
font-size 13.3333px
div 14px
body 13px
color rgb(0, 0, 0)
#container #333
text-align start
#wrapper left
.bodyStyle center
width 400px
margin-top 0px
margin-right 0px
margin-bottom 0px
margin-left 0px
padding-top 0px
padding-right 0px
padding-bottom 0px
padding-left 0px
why can't you switch to any available iframe without specifying the ID or name.
you can do this just switch to iframe..
try this
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe")));
If you are getting ElementNotVisibleException,it means element is invisible at that time.You can use explicit wait to achieve this :
WebDriverWait wait = new WebDriverWait(driver,<Time>);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("el6")));
First,you calculate time which is taken by element to visible and replace with <Time>.
For more detail,you can [see][1].
[1]: http://docs.seleniumhq.org/docs/04_webdriver_advanced.jsp
Related
I'm learning robot framework since a couple of weeks, and I have the next situation while making a robot with a real case:
I have a value of the id of a company, and with it, I need to locate the button with that info which is inside of an accordion on the website, the accordion button list is totally variable and can have one or various items
for context, the part of the site is like this:
<div class="accordion ui fluid"><div class="item" style="background-color: white; margin: 1rem 0px; border-radius: 10px;"><div class="title accordion-title"><i aria-hidden="true" class="dropdown icon"></i>Accordion 1</div><div class="content" style="padding: 1rem; background-color: rgb(238, 238, 238);"><div class="persona-btns"><div><button class="ui primary button">Accordion1 op1</button><button class="ui primary button">Accordion1 op2</button></div></div></div></div><div class="item" style="background-color: white; margin: 1rem 0px; border-radius: 10px;"><div class="active title accordion-title"><i aria-hidden="true" class="dropdown icon"></i>Accordion2</div><div class="content active" style="padding: 1rem; background-color: rgb(238, 238, 238);"><div><button class="ui basic button" style="padding: 0px; box-shadow: 0px 0px 0px 0px; margin: 0px; text-align: inherit;">*id number of a company* *variable text(name of a company)*</button></div></div></div></div>
I tried with a
Click Button //button[.//text()=*id value*]
but in that case, doesn't find anything, and just comes with an error
and the other option, is to use a Get WebElements Keyword, with the container of the buttons, and that lists the webelements but without a direct way to make it match the text value:
[<selenium.webdriver.remote.webelement.WebElement (session="3932a0dd61c3018f5ede7ca31ea475b1", element="59b4ad4d-3410-4e95-b1e5-3d02e07d1894")>]
so I need to find a way make the framework identify the element with the text, or in the WebElements option, to get the text of the html and get the data to make it clickable with the Click Button Keyword
Looks like id value is not the exactly text content value of any text node inside that button.
So, instead of this //button[.//text()=*id value*] please try this XPath expression
//button[contains(.,'*id value*')]
So, the entire command line will be
Click Button //button[contains(.,'*id value*')]
I want to switch between two slides by using a scroll and I want to have an indicator
to show which of the two slides that are being shown.
Building the scroll part was not very difficult and has been done.
My problem is:
How can I extract the idx value from the for loop to know which one of the to slides that is being shown?
This so that I can present which slide I am on with the indicators.
Scrolling
This is the code for scrolling between the two images.
HTML
<div class="container_large">
<div v-for="(i,idx) in this.slider_header " class="scroll" :key="idx" >
<div :style="{height:'82px', width:'100%'}" v-if="idx==0" >
Slide 1
</div>
<div v-if="idx==1" :style="{height:'92px', width:'100%'}" >
Slide 2
</div>
</div>
</div>
CSS
.container_large{
width: 100%;
/* width: 90%; */
display: flex;
overflow-x: scroll;
margin-left: 0%;
height: 99px;
position: absolute;
margin-top: 27%;
z-index: 2;
}
.scroll{
min-width:388px;
position: relative;
margin-top: 0%;
border-radius: 8px;
display: flex;
height: 92px;
z-index: 1;
margin-left: 2%;
object-fit: cover;
}
Indicators
This code is for the indicators to show which of the two images that are being shown at the moment.
<div :style="{height:'15px', position:'absolute',marginTop:'51%',borderRadius:'8px',zIndex:'3', width:'30px',marginLeft:'43%',backgroundColor:'grey'}">
<div id="slide1" :style="{borderRadius:'50%',height:'13px',marginLeft:'8%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
<div id="slide2" :style="{borderRadius:'50%',height:'13px',marginLeft:'51%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
</div>
I would like to add v-if="idx==0" and v-if="idx==1" to id="slide1" and id="slide2" respectively to show which one of them that is being seen but
since they fall outside of the for loop this doesn't work.
Question
How can I catch the idx value or solve this in some other way to present which slide that I am on?
Ok so I think you have too much v-if inside your v-for.
There is no need to create all of your slides with to then only render one of them with series of conditions.
Have you considered something like this?
<div class="container_large">
<div
class="slide"
:style="slides[activeSlide].style">
{{slides[activeSlide].text}}
</div>
</div>
I need to select a date say like Year as 1947, Month as Aug and Date like 15.
What are the methods and classes that I need to use? I tried using WebElement by xpath. I cant locate the year and month only date is located. Please suggest me the rigt way
This is HTML Page source for that particular element
<td>
<div>
<div class="dais_gwt_input_div" style="margin-left: 140px; margin-bottom: 0px; width: 175px; height: 24px;">
<input id="EMPLOYEE_New_DOB" class="dais_gwt_input_Field" type="text" style="border-style: none; padding: 2px 20px 2px 6px;" maxlength="10"/>
<div id="dais_gwt_fieldcontainer_left_right_top_bottom_label" class="default-label" style="margin-top: 3px; float: left; width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: -275px;">DOB</div>
<div id="undefined" class="dais_gwt_image_div" align="center" style="float: right; margin-top: -23px;">
<img id="undefined" class="applyclicks" align="middle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABkUlEQVR42p2Ty07CUBCG+waSGHAnPIbII4hAYSFySaSWxMJClqxISIQIigKPIwkhUsJlSSAQsFx8BC5bfk9HhaJpQjrJpPlm2j//mTPloIlut4t0Or3HqVRKt68Gt9ls0Gg0UKvVUCy+wufzolqtol5/Z/wCl+uSet+861cqb5jPP8ElEvfwenlEIjfgeQ8cjnMIQoSS592w2880vOuHwyEEgwFwJycWtFotsiPLMmIxaWtPlusQRUHD+31RvAVntZ5uBZbLJbM1376wWq0Yz/7wri9Jd+BsNiuazSaMxD+Bfr9P88hmM8T5fJ7OrSgKJpMJG6iTaroCg8EAoVAQhcITcalUokHNZlNKv/+KaroCi8UCnU4Ho9GIeDweE6/Xa8p2u001XQH1abGYmYsAsXpdZvMxLZCaJtMRqwlGHKw0Dj70BYbDATuzOoNn4nL5dwYzTKcHzKDX68HjcSOTeSDO5XKMXT+3oMDpvGC1x30B7SIZ2gN1ldWzGYloVASXTCYRCFwjHo+R4mEp0cfqv/AFv/QghO2HDIwAAAAASUVORK5CYII=" style="cursor: pointer;"/>
</div>
</div>
</div>
</td>
All I need to know is how to locate and access the year and month I tried using arrow keys in it by using xpath and Action class but I cannot click every time and move forward and backward, same with the month. I dont have any idea about how to handle this. I have never faced this before.
I have added a jumbotron to my webpage, my page is now displaying the bottom and right scroll bar! Not sure how to resolve this.
Any tip's or pointers much appreciated.
url http://tyrescanner.net/contact-us
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1><span style="color: #ffffff;">Welcome to Tyrescanner</span></h1>
<p></p>
<h2>Contact us.</h2>
</div>
</div>
</div>
</div>
what are you asking for? I assume you just don't want bottom scrollbar ,is that right?
If so, below is your CSS for HTML . change that as below it's in your bootstrap.css file and line number 1071
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: auto;
overflow-x: hidden;
}
Your jumbotron is wrapped with divs row and col-md-12:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
Delete them and leave only jumbotron.
or remove paddings from your css:
.container-fluid {
width: 100%;
padding-top: 0px;
/* padding-left: 0px; */
/* padding-right: 0px; */
padding-bottom: 0px;
}
It overwrites bootstrap css and cause problem with page width.
After viewing your site I see some issues:
You're using a container-fluid and a nested container-fluid as the jumbotron parent element, the nested one is redundant.
Then I see you've overridden container-fluid and .col--12 classes default bootstrap left/right padding to 0px but you didn't change the default margin of the .row class to have 0px left/right margin hence your bottom scroll bar.
For the footer, remove the margin-top and make the footer a direct child of the body element then add the following css to the form, body and html elements: height:100%;, the rest is margins that you added to the elements.
Hey guys, my first question here on stack overflow. Trying to get something pretty simple to work, I'm sure I'm missing something quite obvious. Still getting used to the "standard" css, too many years working with non-functional ones! Heh.
So, sample of what I'm doing:
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
<div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
In essence: The first div is a container, that I would like to automatically overflow as content is added. Inside of that container, I have a popup menu, which I have simplified here. The popup menu appears (as it should) directly under "hello".
My problem, however, is that instead of the popup menu "coming out" of the parent, as would be expected by the absolute position, it is actually causing a scrollbar to appear on the parent.
I know that if I take otu the "position: relative" it works, but then it no longer appars where I want it (directly under the previous element).
What am I missing here?
EDIT: Sample here: http://marcos.metx.net/OverflowTest.htm
first of all - Inline styling is a big no no.
It is best to include a style sheet and apply it to individual div's via the "id" or "class" attributes.
Please read up on standards compliant css at w3schools
The problem is your overflow property.
auto - "If overflow is clipped, a scroll-bar should be added to see the rest of the content"
What you are looking for is "overflow: visible;"
Using position: absolute instead of relative on that middle div will solve your problem. This gives you (with an added border color on the inner-most div):
alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png
And here is the updated source code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: absolute; z-index: 99999">
<div style="z-index: 99999; overflow-y: hidden; position: absolute;
overflow: hidden; height: 200px; left: 0; auto: 0;
border: 1px solid red">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For more on this, see Absolutely positioned box inside a box with overflow: auto or hidden.