I am trying to click on a button on a website using VBA Selenium via Chrome.
When I use VBA code to click the button, ElementNotVisibleError pops up:
VBA code:
Set CD = New Selenium.ChromeDriver
CD.Start
CD.Get Url
Application.Wait (Now + TimeValue("0:00:05"))
CD.FindElementByCss(".inline_cancel").Click
When I move the mouse to the place where button is, the button appears and HTML code style display changes to block and before it was none.
When set to "none" VBA cannot find the element.
When set to "block" VBA can detect the element.
HTML code:
<span class="edit-hover" style="display: none;"><input type="hidden" name="field_root_name" id="order_header_change_attachments_attributes__field_name" value="order_header_change[attachments_attributes][]" class="field_root_name"><input type="hidden" value="365995938" name="order_header_change[attachments_attributes][365995938][id]" id="order_header_change_attachments_attributes_365995938_id"><input value="false" class="delete-field" type="hidden" name="order_header_change[attachments_attributes][365995938][_delete]" id="order_header_change_attachments_attributes_365995938__delete"><span class="intent-field"><span class="attachment-intent-checkbox"><input name="order_header_change[attachments_attributes][365995938][intent]" type="hidden" value="Internal"><input class="intent_checkbox_field" id="attachment_365995938_intent" type="checkbox" value="Supplier" name="order_header_change[attachments_attributes][365995938][intent]">→ <label for="attachment_365995938_intent">Supplier</label></span></span><a aria-label="Delete Attachment" class="inline_cancel" href="javascript:void(0);" role="button" tabindex="0"> </a></span>
You saw it right. Clearly the desired element:
<a aria-label="Delete Attachment" class="inline_cancel" href="javascript:void(0);" role="button" tabindex="0"> </a>
have the ancestor <span> with attribute style="display: none;"
<span class="edit-hover" style="display: none;">
which implies the element is hidden i.e. either not visible or not enabled.
To click on the element you have make the desired element clickable by taking some actions on some other element first.
Related
I have a custom component in Vue that is a multiple selection. Due to the way this was created, I am having difficulties validating that at least one option has been selected. As currently, the component uses a button, that when toggled opens a popup/dropdown for the user to select some options. But I cannot figure out how to validate this. I have tried replacing this button with other components such as <input> and <select> but nothing seems to work.
This is where I am currently at:
<div
:id="'multiple-selection' + customFieldId"
class="dropdown multiple-selection"
>
<input
type="button"
class="form-control dropdown-toggle"
data-type="Multiple Selection"
:id="customFieldId"
:value="localValues"
:required="required"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
/>
<div
:id="'multiple-selection-options' + customFieldId"
:name="'multiple-selection-options' + customFieldId"
class="dropdown-menu multiple-selection-options-wrapper"
style="/*width: calc(100% - 40px)*/"
>
<a
v-for="fOption in options.split(',').map(option => option.trim())"
class="dropdown-item cursor-pointer three-dots-text"
#click="selectOption(fOption)"
#click.stop
>
<input
class="cursor-pointer"
type="checkbox"
:id="'checkbox-' + fOption + customFieldId"
value="fOption"
:checked="localValues.includes(fOption)"
/>
<span :for="'checkbox-' + fOption + customFieldId">
{{ fOption }}
</span>
</a>
</div>
</div>
My current issues with this implementation are that I am unsure how to display the options in the input when selected, or a None selected placeholder when none are, and then of course, when they click save, the browser popup should tell them that it is a required field.
I am testing a react.js front end web application with selenium and C# automation framework, I need to click all the elements in a drop down list, ideally, I would like to select the drop down as a list of elements, and iterate through each element and click it.
I have tried to locate the dropdown menu By Xpath, Cssselector, cssName, none seems to work, when I debug the code, my "dropDown" variable is always null
Here is the code of the drop down menu
<div class="dropdown-menu shadow px-4 show">
<div>
<label class="dropdown-item m-0 px-0 d-block"><input type="checkbox" value="1">1 </label>
<label class="dropdown-item m-0 px-0 d-block"><input type="checkbox" value="2">2</label>
<label class="dropdown-item m-0 px-0 d-block"><input type="checkbox"value="3">3</label>
<label class="dropdown-item m-0 px-0 d-block"><input type="checkbox" value="4">4</label>
<label class="dropdown-item m-0 px-0 d-block"><input type="checkbox" value="5">5</label>
<label class="dropdown-item m-0 px-0 d-block"><input type="checkbox" value="6">6</label>
</div>
</div>
here is my selenium code
public static IList<IWebElement> dropDownClick (IWebDriver _driver) {
IList<IWebElement> dropdown = _driver.FindElements (By.ClassName ("dropdown-menu shadow px-4 show"));
return dropdown
}
I expected the variable "dropdown" is not null when I run the code in debug mode
Please use code written below in order to get the elements and to click on each element in iteration:
//Below line Finds the dropdown
WebElement dropdownElement = driver.findElements(By.xpath("//div[contains(#class,'dropdown-menu')]"));
//Below line stores all elements present in dropdown in a list of webelements
List<WebElement> elements = driver.findElements(By.xpath("//div[contains(#class,'dropdown-menu')]//label"));
for(WebElement ele : elements){
//To click on dropdown
dropdownElement.click();
//To click on label present in dropdown. This will change with each Iteration
ele.click();
}
Hope it helps :)
For xpath why not just use:
//div[#class='dropdown-menu shadow px-4 show']//label ---yields 6 rows
If this is not working, make sure the drop down is not in an iframe. You need the //label added so all elements appear in your "FindElements". Without it your return is 1.
Please try with below xpath. May be it is because of sapce,
//div[contains(#class,'dropdown-menu')]//label
I'm trying to use VBA to click on a context drop down menu that contains links that open pop up boxes. However, using getElementById and .selectedIndex don't seem to be working as i Can't seem to find the right ID.
Also, when I click to inspect the context menu it gives me this code which doesn't seem right:
<div data-dojo-attach-point="rowNode" data-dojo-attach-event="onclick:_onClick" class="agsjsTOCRootLayer" title="Source Features" style="padding-left: 0px;">
Here is some source code for the dialog box that contains the drop downs with clickable buttons that open new dialog boxes:
<div id="dijit__Widget_1" widgetid="dijit__Widget_1">
<div class="agsjsTOCNode" id="TOCNode_id_source_features"widgetid="dijit__Templated_38">
<div data-dojo-attach-point="rowNode" data-dojo-attach-event="onclick:_onClick" class="agsjsTOCRootLayer" title="Source Features" style="padding-left: 0px;">
<span data-dojo-attach-point="contentNode" class="agsjsTOCContent">
<span data-dojo-attach-point="checkContainerNode"><img>
src="http://js.arcgis.com/3.13/dojo/resources/blank.gif" alt="" data-dojo-attach-point="iconNode" class="dijitTreeExpando dijitTreeExpandoClosed agsjsTOCIcon">
<div class="dijit dijitReset dijitInline dijitCheckBox" role="presentation" widgetid="dijit_form_CheckBox_16">
<input type="checkbox" role="checkbox" aria-checked="false" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" value="on" tabindex="0" id="dijit_form_CheckBox_16" style="user-select: none;">
</div>
Source Features
I'm trying to click on a drop down menu that appears only if your mouse is hovering over it to the right of the Source Feature title.
I've tried using the index selection code, but can't seem to find the right ID. Thanks.
application consist dynamic search box &
while typing "Mumbai" search results drop down display as below,
But through selenium as,
driver.findElement(By.id("searchstr2")).sendKeys("Mumbai");
or
driver.findElement(By.id("searchstr2")).sendKeys("Mumbai"+ARROW_DOWN);
search result not display as,
text box html as,
<input id="searchstr2" class="search ui-autocomplete-input" type="text" placeholder="Search for Building, Location or Developer" autocomplete="off" name="searchstr2" size="35" style="background-image: none;"
after successful search list display as,
<li id="ui-id-117" class="ui-menu-item" tabindex="-1">
<a>
Nariman Point -
<b style="font-size:11px">
<span style="font-size:.8em; /*color:#EE7600;*/ color:#888888; float:right;">locality</span>
</a>
</li>
<li id="ui-id-118" class="ui-menu-item" tabindex="-1">
<li id="ui-id-119" class="ui-menu-item" tabindex="-1">
<li id="ui-id-120" class="ui-menu-item" tabindex="-1">
<li id="ui-id-121" class="ui-menu-item" tabindex="-1">
please suggest.
The problem with the autocomplete fields is that usually there is a Javascript event that waits for text to be present in the field in order to display the available suggestions (could be Ajax that gets executed to get the suggestions from the server). SendKeys doesn't trigger that event, so you could try to click into the field after you've entered you're text.
Basically:
WebElement suggestion = driver.findElement(By.id("searchstr2"));
suggestion.sendKeys("Mumbai");
suggestion.click();
I didn't test this, so you could try using the click() method before sendKeys().
If this doesn't fix your issue, you could try to do it by using Javascript to trigger your onChange event:
WebElement suggestion = driver.findElement(By.id("searchstr2"));
suggestion.click();
suggestion.sendKeys("Mumbai");
((JavascriptExecutor) driver).executeScript("$(arguments[0]).change(); return true;", suggestion);
java scripts takes some time to load the list so i have added timer in between send name & arrow down key event will be works for me code snap as,
WebElement ar=driver.findElement(By.id("searchstr2"));
ar.sendKeys("Mumbai");
Thread.sleep(2000);
ar.sendKeys(Keys.ARROW_DOWN);
I have a set of radio buttons that reveal more options on a page when they are clicked. Here is the set of radio buttons...
<div class="field">
Single
<input id="selection_single" type="radio" value="single" name="selection" checked="checked">
Repeating Dates
<input id="selection_repeating" type="radio" value="repeating" name="selection">
</div>
I am trying to click the 2nd button w/id selection_repeating. In my spec file I have choose("selection_repeating"), but am getting an error when running the script saying Unable to find radio button "selection_repeating". Any ideas?