I have a strange problem . I have a non select drop down with Id as below . There is a no select tag I can see in the code for this field just an input tag nor I can see the text contained in the drop down in the DOM after a select a value . StaffSoCategory is the text box , SelectStaffSoCategory is the icon for the drop down down arrow and StaffSoCategoryValue I believe is for the values displayed .
<input type="text" id="StaffSoCategory" style="width: 126px; font-weight: lighter; border: 1px solid gray; height: 25px; float: left; font-size: 12px; color: black; font-family: Arial; background-color: white;" readonly="readonly" class="ui-autocomplete-input" autocomplete="off" disabled="disabled">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">4 results are available, use up and down arrow keys to navigate.</span>
<div id="SelectStaffSoCategory" tabindex="0" style="border-style: solid; border-width: 1px 1px 1px 0px; border-color: gray; width: 22px; height: 29px; background-position: center; cursor: pointer; background-image: url('Images/dropdown.png'); background-repeat: no-repeat; float: left; margin-left: 0px; "></div>
***<input id="StaffSoCategoryValue" type="hidden" value="">***
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-4" tabindex="0" aria-disabled="false" style="z-index: 1; display: none; top: 584px; left: 829px; width: 148px;"></ul>
Once I select the first drop down value (the visible text in drop down is "Confirmed") then value comes in tag but not the visible text of the value that I see , something like below
<input id="StaffSoCategoryValue" type="hidden" value="BCK-Yes">
Is there a way to click on the first value in the drop down I tried with this value "BCK-Yes" and it said element is not visible. I tried selecting the input by Id and then trying Keys down and keys enter that also didn't work.
The code I am trying is
JavascriptExecutor js = (JavascriptExecutor)driver;
WebElement revenuePotential = driver.findElement(By.id("SelectStaffSoCategory")); revenuePotential.click();
WebElement revenuePotentialValue = driver.findElement(By.id("StaffSoCategoryValue"));
js.executeScript("arguments[0].click();", revenuePotentialValue);
Console errors I am getting are
StaffSoJsFun.js?v=2019020100000:1 Uncaught TypeError: $(...).autocomplete is not a function
at HTMLDivElement.<anonymous> (StaffSoJsFun.js?v=2019020100000:1)
at HTMLDivElement.dispatch (jquery-2.0.0.js?v=2019020100000:25)
at HTMLDivElement.y.handle (jquery-2.0.0.js?v=2019020100000:25)
(anonymous) # StaffSoJsFun.js?v=2019020100000:1
dispatch # jquery-2.0.0.js?v=2019020100000:25
y.handle # jquery-2.0.0.js?v=2019020100000:25
Access to XMLHttpRequest at '' from origin 'xx.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Well, the input is hidden, so I'm not surprised selenium tells you the element is not visible. Methods that emulate user actions like click() and sendKeys will not be able to affect hidden elements. However, I think the following might work:
First store that element in an object, let's say element and then try the following code to click on that hidden element:
WebDriver driver= new ChromeDriver();
JavascriptExecutor js = (JavascriptExecutor)driver;
driver.get(desiredURL);
//do all the stuff you want to do before `executeScript()`
js.executeScript("arguments[0].click();", element);
Give that a shot?
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 am not able to click and select the value from dropdown by using XPath
driver.findElement(By.xpath(".//*[#id='ProcessTypeIGCombo']/span")).click();
MY HTML code is as below:
<input class="ui-igcombo-field ui-corner-all" readonly="" style="float: left; display: block; position: absolute; height: 20px; width: 99.7921%;">
for more details please use the screenshots
HTML:
<span class="Select-multi-value-wrapper" id="react-select-27--value">
<div class="Select-placeholder">Select</div>
<div class="Select-input" style="display: inline-block;">
<style>input#undefined::-ms-clear {display: none;}</style>
<input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-27--value" value="" style="width: 5px; box-sizing: content-box;">
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 13px; font-family: "Open Sans", sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div>
</div>
</span>
Code:
Select role = new Select(driver.findElement(By.xpath("//span[#id='react-
select-17--value']/div")));
role.selectByVisibleText("Manager");
also tried:
By.xpath("//*[#id='react-select-27--value']/div[1]");
By.xpath("//*[#id='react-select-27--value']");
I am getting following error.
Unable to locate element: {"method":"xpath","selector":"//span[#id='react-select-17--value']/div"}
please help.
You should not use Select. bec it's only applicable to select tag only.
In your case you have input tag with combobox role . Please try below code
WebElement ele = driver.findElement(By.xpath("//input[#role='combobox' and #aria-activedescendant='react-select-27--value']");
ele.click();
driver.findElement(By.xpath("//*[text()='Manager')");
The dropdown you are targeting is not your conventional HTML <select> element, hence Select class won't work. Instead you should do something like this -
driver.findElement(By.xpath("//span[#class='Select-multi-value-wrapper']")).click();
No you need to locate the exact option. Normally, you cannot see all your React elements inside your inspector. If you are using Chrome browser, you can install this extension and then view your elements, locate them and click on it using Selenium through your regular locators.
As per your code, you can not use Select here because it is a bootstrap drop down so that you can use like below sample code
WebElement DropDownClick = driver.findElement("Locator Value");
DropDownClick.click();
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//List of Drop Down locator
List<WebElement> Drop_options = driver.findElements(By.xpath("//span[#class='Select-multi-value-wrapper']//div"));
for (WebElement temp: Drop_options ) {
if (temp.getText().contains("Manager") {
temp.click();
break;
} else {
System.out.println("Continue");
}
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
This button is before CSS Sprites
<input type="image" src="/images/search-button.png" value="" id="search-button">
I'm trying to implement CSS Sprites with one of my search form and the problem is that if I use
<input id="search-button" class="sprites1" type="submit" value="">
it will look something like this.
As you can see the image on the right doesn't look right, but it is click-able.
Then I tried with
<span id="search-button" class="sprites1"></span>
Then it looks right! But!! I can't click on it.
So here is my CSS sprites code.
What I have to implement to get it look the one I want and I can click on it?
.sprites1 {
background: url('result.png');
}
#search-button {background-position: -0px -462px;
width:16px; height:16px; float:right; }
The problem here is the default css that the browser uses on elements. You should try resetting that css. I often use the following snippet:
/* reset css of buttons */
.cssresetbutton {
border-width: 0px;
border-style: none;
background: inherit;
font: inherit;
color: blue;
padding: 0px; }
.cssresetbutton:active {
border-width: 0px;
border-style: none;
background: inherit;
outline: 0;
box-shadow: none; }
try adding the cssresetbutton class to your input element and see if it works.
EDIT:
You can also try not using a input[type=submit] element. For example:
<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>
It will submit the form#formid element when clicked.