Webpage element seems to be invisible to Selenium - java

I'm trying to click/sendKeys to a button labelled Browse on a webpage, and no matter what I try, Selenium fails to find it.
Using Selenium's IDE, I can gather the following information:
id=uploadField
name=uploadField
css=#uploadField
dom:name = document.uploadForm.uploadField
xpath:attributes = //input[#id='uploadField']
xpath:idRelative = //div[#id='browseBtnContainer']/form/input[4]
dom:index = document.uploadForm.elements[3]
xpath:position = //input[4]
And I've tried all of the following By. sequences, all of which throw a NoSuchElementException. There is only one iframe and I tried to switch to iframe but it didn't work.
WebElement browse = driver.findElement(By.id("uploadField"));
WebElement browse1 = driver.findElement(By.name("uploadField"));
WebElement browse2 = driver.findElement(By.cssSelector("#uploadField"));
WebElement browse3 = driver.findElement(By.cssSelector("uploadField")); // just in case
WebElement browse4 = driver.findElement(By.xpath("uploadField")); // attributes
WebElement browse5 = driver.findElement(By.xpath("//div[#id='browseBtnContainer']/form/input[4]")); // idrelative
WebElement browse6 = driver.findElement(By.xpath("//input[4]")); // position
The container portion of the code confuses me. I don't know how to access the elements in a container, and anything I find on google just tells me to use the xpath, of which I can't seem to find.
Am I using the By.xpath incorrectly? How can I generate a list of every single element on the webpage?
Here is the relevant HTML source code:
<div id="ext-comp-1022" class=" x-panel x-border-panel" style="left: 0px; top: 0px; width: 1077px;">
<div id="ext-gen27" class="x-panel-bwrap">
<div id="ext-gen28" class="x-panel-body x-panel-body-noheader" style="overflow: auto; width: 1075px; height: 502px;">
<div id="ext-comp-1023" class=" x-panel x-panel-noborder">
<div id="stepOnePanel"/>
<div id="stepTwoPanel"/>
<div id="stepThreePanel"/>
<div id="stepOnePanel" class="step-container" style="margin:20px 20px 20px 30px;">
<div class="step-title" style="background-color:transparent;background-repeat:no-repeat;background-position:top left;background-image:url(/assets/icons/medium/icon-1.png );padding:12px 0px 0px 50px;height:30px;font-weight:bold;">Start by selecting the ZIP file which contains your images (20MB max)</div>
<div id="ext-gen71" style="padding-left:70px;overflow:auto;">
<div id="ext-comp-1024" class=" x-panel x-panel-noborder">
<div id="ext-gen74" class="x-panel-bwrap">
<div id="ext-gen75" class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
<div style="padding-top:2px">
<div id="browseBtnContainer" style="float:left;width:85px;margin-top:-2px">
<table id="browseBtn" class="x-btn stepBtn x-btn-noicon x-btn-over" cellspacing="0" style="width: 79px;">
<form enctype="multipart/form-data" target="hiddenUploadFrame" method="post" action="/uploader/upload?actingAsUserId=pleach&currentAccountId=bmwofreading&uploadAccountId=bmwofreading&ccmode=multiwindow" name="uploadForm">
<input id="doNotResize" type="checkbox" style="display:none" value="true" name="doNotResize"/>
<input id="pdfConvert" type="checkbox" style="display:none" value="true" name="pdfConvert"/>
<input type="hidden" value="false" name="previewNeeded"/>
<input id="uploadField" type="file" size="1" style="position: absolute; top: 0px; left: -19px; opacity: 0; cursor: pointer; height: 22px;" name="uploadField"/>

You need to switch to the frame in order to interact with the elements in it
driver.switchTo.frame("id"); //using the frame id attribute
// or
driver.switchTo.frame("name"); //using the frame name attribute
// or
WebElement frame = driver.findElement(...);
driver.switchTo.frame(frame); //using the frame as WebElement
And to switch back
driver.switchTo().defaultContent();

Try following method.
driver.findElement(By.xpath("//input[#id='uploadField']")).click();

As per provided HTML, we can try directly by using id or name. If you are looking for xpath only, then try below relative xpath
//input[#id='uploadField']
If directly click does not works then try with Actions. First move to element then try to click. i hope this way helps and works good for me on most of cases
Actions move=new Actions(driver);
move.moveToElement(driver.findElement(By.xpath("//input[#id='uploadField']"))).click().build().perform();
finally you can try by using javascript executor
WebElement element = driver.findElement(By.id("uploadField"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", element);
Thank You,
Murali

Related

element is not clickable at point(987, 466)

#FindBy(xpath="//input[#name='MiddleName']")
private WebElement middlename;
WebDriverWait clickableWait = new WebDriverWait(getWebDriver(), 120);
clickableWait.until(ExpectedConditions.elementToBeClickable(middlename));
middlename.click();
middlename.clear();
waitPlease(2);
middlename.sendKeys("Jhon");
i am using this code to click a input box but i get an error
Element <input type="text" value="as" name="MiddleName"> is not clickable at point (987, 466). Other element would receive the click: <div _ngcontent-c8="" class="modal-body" style="padding: 50px; max-height: 500px; overflow-y: scroll;">...</div>
the block element not in my webpage so whya thats error coming..
i am using testNG Framework in my project:-
any help for this ,Thanks in advance

Selecting from div class dropdown - Selenium but its not working

I am trying to select an option from a drop-down that does not populate until the locator has been clicked. This my solution but it's not working.
List<WebElement> options = driver.findElements(By.cssSelector("mat-select"));
for (WebElement option : options) {
if (option.getAttribute("ng-reflect-value").contentEquals("50757")) {
Actions build = new Actions(driver);
build.moveToElement(option).click().build().perform();
}
}
HTML of the dropdown.
<div role="listbox"
tabindex="-1"
class="ng-tns-c114-22 ng-trigger ng-trigger-transformPanel mat-select-panel mat-primary"
id="mat-select-0-panel"
aria-multiselectable="false"
aria-labelledby="mat-form-field-label-27"
style="transform-origin: 50% 22px 0px; font-size: 15px; opacity: 1; min-width: calc(100% + 32px); transform: scaleY(1);">
<mat-option
_ngcontent-tqo-c274=""
role="option"
class="mat-option mat-focus-indicator mat-active ng-tns-c114-22 ng-star-inserted"
ng-reflect-value="50757"
id="mat-option-0"
tabindex="0"
Please try with the below code: If possible please share the application URL then I can replicate it from my side.
WebElement option = driver.findElement(By.xpath("//mat-
option[contains(text(),'option text')]");
driver.waitUntilElementVisible(option, 10);
driver.findElement(option).click();
Also please refer link for more details on selecting a particular value in a dropdown without using the methods of Select class in Selenium

How to create unique, complex Xpath to find a textarea tag?

Recently I'm struggling in my job with an issue of creating a proper Xpath selector to get the content of the demanded text area.
Here's the structure of my HTML document:
<div id="X115OutsideBorder" style="left: 59.1%; top: 855px; width: 14.6%; height: 22px; position: absolute;">
<div class="CheckBox ltr mandatoryFieldStyle " id="X115Border">
<div class="xEdit FormatInputReadonly" id="X115Edit">
<div style="display: inline-block; direction: ltr;">
<label disabled="" class="xCheckboxIcon" id="X115Icon" for="X115"></label>
<input name="instance/CUST.risk.major.inc" tabindex="-32768" disabled=""
id="X115" onclick="handleOnClick(this, event);"
onfocus="handleOnFocus(this, event);" onblur="handleOnBlur(this, event);
applyToSameControl(this);" onchange="handleOnChange(this, event);"
type="checkbox" readonly="" value="true" datachangeevent="3034" dvdvar=""
buttonid="" sctype="CheckBox" ref="instance/CUST.risk.major.inc">
</div>
<span class="xCheckboxLabelSpan FormatLabel " id="X115LabelSpan">
<label class="xCheckboxLabel" id="X115Label" for="X115" enabledstyle="
color:
#000000;
">Risk to Major Incident?</label>
</span>
</div>
</div>
</div>
<input id="X117" type="hidden" value="0" dvdvar="instance/CUST.interface.error">
<span class="Label" id="X119" style="left: 0%; top: 885px; width: 15.1%; height: 22px; text-align: right; position: absolute;" type="label">
<label id="X120_Label" for="X120">Additional Information</label>
</span>
<div class="MultiText" id="X120Border" style="left: 16%; top: 885px; width: 71.5%; height: 187px; position: absolute;">
<div class=" mandatoryFieldStyle xEdit xTextArea" id="X120Edit" style="height: 187px;">
<textarea name="instance/Additional.information" tabindex="-32768" id="X120"
style="height: 185px;" onkeyup="
lockFormOnValueChange(this);
"
onclick="handleOnClick(this, event);" onfocus="handleOnFocus(this, event);"
onblur="handleOnBlur(this, event); applyToSameControl(this);"
onchange="handleOnChange(this, event);" rows="4" cols="81"
dvdvar="instance/Additional.information" buttonid="" sctype="MultiText">
</textarea>
</div>
</div>
So I created a class in Java with usage of a Selenium framework, looking as follows:
Thread.sleep(5000);
WebDriverWait wait = new WebDriverWait(driver, 15);
WebElement additionalInfoElement = wait.until
(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='sm-clpsSectionCnt ie cntExpanded']
//div[#class='MultiText']//div[#class=' mandatoryFieldStyle xEdit xTextArea'] //textarea[contains(#id,'X120')]")));
driver.findElement(By.xpath("//div[#class='sm-clpsSectionCnt ie cntExpanded'] //div[#class='MultiText']//div[#class=' mandatoryFieldStyle xEdit xTextArea']
//textarea[contains(#id, 'X120')]"));
Thread.sleep(3000);
additionalInfoElement.click();
String additionalInfoContent = additionalInfoElement.getText();
driver.switchTo().defaultContent();
Map<String, String> assigneesToKeywords = new HashMap<>();
assigneesToKeywords.put("ee57977","Please select the affected Process / Application::SSR");
assigneesToKeywords.put("c308042","Please select the affected Process / Application::SSR1");
assigneesToKeywords.put("p853780","Please select the affected Process / Application::MMSR");
assigneesToKeywords.put("c323607","Please select the affected Process / Application::Reporting");
assigneesToKeywords.put("c152236","Please select the affected Process / Application::BOI");
assigneesToKeywords.put("ex73629","K3, K4");
assigneesToKeywords.put("C321274","Please select the affected Process / Application::CPR");
assigneesToKeywords.put("X","Please select the affected Process / Application::FOBO");
assigneesToKeywords.put("c325285","Please select the affected Process / Application::T-RECS");
for (Map.Entry<String,String> entry : assigneesToKeywords.entrySet()){
if (entry.getValue().contains(additionalInfoContent)){
chosenAssignee=entry.getKey();
}else
chosenAssignee="XXXX";
}
return chosenAssignee;
}
What I'm trying to do right now, is to get the content of the text area named "Additional Info" and compare it against the values of the map "assigneesToKeywords". However, Xpath which I created doesn't work and I ran out of ideas how to fix it... I still get the following error: "Expected condition failed: waiting for visibility of element located by By.xpath: ..."
So far I was trying to increase the amount of a time-out, but it didn't work. I guess it's all about the proper construction of an Xpath.
Any ideas of what I'm doing wrong? Thanks a lot in advance guys!
Best regards,
Mateusz.
As I'm understanding it you're trying to find the textarea that is labeled Additional Information. This label element has a #for attribute that is the #id attribute of the textarea element.
<label id="X120_Label" for="X120">Additional Information</label>
<textarea name="instance/Additional.information" tabindex="-32768" id="X120" ...</textarea>
Try this:
WebElement additionalInfoElement = driver.findElement(By.xpath("//textarea[#id=//label[text()='Additional Information']/#for]"));
String additionalInfoContent = additionalInfoElement.getText();

Can't select Multiple Dropdown with Selenium webdriver (not class Select)

I'm having a problem with my tests with Selenium webdriver. I'm using Java. Can't select from a multiple drop-down that is not class Select. This is how the drop-down looks like:
Drop-Down picture
And that's the code:
<div class="form-group ">
<label for="CurrentCategoriesNomIds-selectized">Categories</label>
<select placeholder="" multiple="multiple" id="CurrentCategoriesNomIds" name="CurrentCategoriesNomIds" tabindex="-1" class="selectized" style="display: none;">
<option value="325" selected="selected">Education</option>
</select>
<div class="selectize-control multi plugin-remove_button">
<div class="selectize-input items not-full has-options has-items">
<div class="item" data-value="325">
Education
×
</div>
<input type="text" autocomplete="off" tabindex="" id="CurrentCategoriesNomIds-selectized" style="width: 4px; opacity: 1; position: relative; left: 0px;"></div>
<div class="selectize-dropdown multi plugin-remove_button" style="display: none; visibility: visible; width: 800px; top: 36px; left: 0px;">
<div class="selectize-dropdown-content">
<div class="option" data-selectable="" data-value="324">Agriculture</div>
<div class="option" data-selectable="" data-value="298">Culture</div>
<div class="option" data-selectable="" data-value="326">Employment</div>
<div class="option" data-selectable="" data-value="323">Environment</div>
<div class="option" data-selectable="" data-value="327">Other</div>
<div class="option" data-selectable="" data-value="297">Political</div>
<div class="option" data-selectable="" data-value="322">Transport</div>
</div>
</div>
</div>
</div>
This is how it looks like when 2 options are selected. I was wondering if I can try with KEYS but the page doesn't work like that. Haven't seen that kind of field before, and not sure how to proceed?
You can click on dropdown using this code :
public static void selectOption(WebDriver driver, String optionName) {
List<WebElement> options = driver.findElements(By.xpath("//div[#class='selectize-dropdoun-content']//div[#class='option']"));
options.forEach(option -> {
if (option.getAttribute("innerText").equals(optionName)) {
Actions actions = new Actions(driver);
actions.moveToElement(option).click().build().perform();
}
});
}
and then use like this:
String option = "Education";
selectOption(driver,option);
Hope that helps you:)
Adding screenshot for what I have tried on website : https://semantic-ui.com/modules/dropdown.html
I don't much use Java, so I'll be writing some pseudo code for this that should give you an outline on how to achieve it (but may not run as written).
public static void selectOptionFromSelectizeDropdown(String optionText, String dropdown){
boolean completed = false;
int numberOfOptions = driver.findElements(By.css(dropdown + " .option")).length
for(int i = 0; i < numberOfOptions && completed === false; i++){
// Check if it's displayed, if it is, HUZZAH! Click the option
if(driver.findElement(By.xpath('//*/*[contains(#class, "option") and contains(text(), "'+optionText+'")])')).isDisplayed()){
driver.findElement(By.xpath('//*/*[contains(#class, "option") and contains(text(), "'+optionText+'")])')).click();
completed === true;
break;
} else {
// In case there are many options, and you have to scroll through them.
int x = 0;
while(x <= 6){
driver.findElement(By.css(dropdown)).sendKeys(Keys.DOWN);
i++;
}
}
if(i===numberOfOptions - 1){
throw new Error("Option Not Found");
}
}
}
selectOptionFromSelectizeDropdown("Education", ".selectize-dropdown-content");
If this doesn't work, I'd recommend changing the click() to a sendKeys(Key.ENTER) to see if that would work.
Explanation
Will loop through, seeing if the option is displayed on the page. If not, will scroll down x times, and check again, until the option is found.
If it reaches the number of options inside the box, it will throw an error.

Element not visible - Selenium - Java Webdriver

I'm trying to fill a form on a website and I am unable to find the element that is listed in the code.
My code:
new WebDriverWait(driver, 30).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("/html/body/div[1]/form/div/div/input[1]")));
driver.findElement(By.xpath("/html/body/div[1]/form/div/div/input[1]")).sendKeys("TEST");
Relative website code:
<body>
<div id="pf_form" class="pf_formcontainer">
<form id="PF_1" class="form formBoxShadow" style="height: 1600px; width:
1800px; display: block; left: 0px; top: 30px;">
<div id="PF_4Container" class="PageContainer" style="left:0px;top:0px;z-
index:0;position:absolute">
<div id="PF_4" class="page" tabindex="" name="PF_4" style="width: 1800px;
height: 1600px; background-color: rgb(255, 255, 255); display: block;">
<input id="PF_5" class="textinput" name="PF_5" maxlength="99" value=""
onclick="return false;" style="left: 169px; top: 107px; z-index: 6; height:
18px; line-height: 18px; width: 206px; display: block;" type="text">
...
I've tried to change to the frame PF_4 and PF_4Container, no luck there. I've tried to find it by ID and other means but this one is kicking my butt.
The form is publicly visible here http://app.perfectforms.com/PresentationServer/Form.aspx/Play/FdjigAcE?f=FdjigAcE
Any guidance would be greatly appreciated. I've been trying to resolve this for weeks now.
If you have your HTMl elements with ids already why using xpath?
Simply use:
WebDriverWait wait = (new WebDriverWait(driver, 30));
WebElement input = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("PF_5")));
input.sendKeys("tests tests");

Categories

Resources