I am trying to automate the assignment for toggle button on the below link :
http://way2automation.com/way2auto_jquery/accordion.php
where the icons will go on and off based on the toggle button.
The HTML code snippet for the buttons are :
<h3 class="ui-accordion-header ui-state-default ui-accordion-icons ui-corner-all" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-circle-arrow-e"></span>Section 1</h3>
I have switched to the frame already and trying to check the element using :
chromeDriver.findElement(By.xpath("//*[#id=\"ui-id-1\"]/span")).isEnabled()
however after clicking on toggel buttons the icon gets disappeared and the element is not visible at all. Hence I am getting error for the above line. Is there any way to check the icons are there or not?
Related
I'm trying to click a menu item, however there are no webelements for the menu items.
When the menu items is not clicked the web element is shown as:
<button aria-expanded="false" aria-haspopup="true" aria-label="More actions" aria-setsize="2" aria-posinset="2" class="icon-only bolt-button bolt-icon-button enabled icon-only bolt-focus-treatment" data-focuszone="focuszone-226" data-is-focusable="true" id="__bolt-header-command-bar-menu-button10" role="menuitem" tabindex="0" type="button">
Once I click the menu item the Button tag changes. However the elements for the menu items are still hiddend.
Image of the menu and after click changes in span tag
click on the html tag and add break on subtree modification . Then click the menu and keep pressing f8 till the drop down is visible
Output:
This question already has answers here:
How to add explicit wait in PageFactory in PageObjectModel?
(2 answers)
Closed 3 years ago.
I'm trying to open a menu in a list of menus' and then click on a link in the menu. the menu list structure is like there are two links side by side. one link goes to the main section that gives the summary and the other one opens the menu. I can click on the link that goes to the main section but couldn't click on the link that opens the menu though the XPath I've used can uniquely identify the menu link. The HTML is :
<li _ngcontent-c9="" class="list-group-item d-flex justify-content-between align-items-center">
<i _ngcontent-c9="">...</i>
<div _ngcontent-c9="" class="center" style="font-family: ITC Avant Garde Gothic Std Book;font-size: 20px;">
<a _ngcontent-c9="" routerlink="../someText/mainlink" href="#/someText/mainlink">Main Link</a>
<span _ngcontent-c9="" style="padding-left:40%">
<a _ngcontent-c9="" class="fa fa-bars" data-target="#basicExample" data-toggle="modal" placement="left">
</a>
</span>
</div>
</li>
I need to get to the link under the span.
There is no text Menu Link. I've added that text so that the structure can be understood. The XPath I've used for the menu link:
.//a[./text()='Main Link']/../span/a
The XPath I've used for the main link is:
.//a[./text()='Main Link']
Also, I've defined that element using the page factory as:
#FindBy(linkText='Main Link')
WebElement mainLink;
Both are working when I try to click on the main link. but I couldn't click on the menu link beside it. I've implemented an explicit wait for 20 seconds. I'm getting TimeOutException.
You can use any of the below xpaths.
Option 1:
//a[.='Main Link']/following-sibling::span/a
Option 2:
//a[#data-target='#basicExample']
I am using bootstrap popover with vuejs.
How can I trigger vue functionality?
In below code when I am clicking on add break link, it opens bootstrap popover, with click me button. Now here vuejs doesn't work, if I click on click me, it is not prompting alert.
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button>' href="javascript:void(0)" class="btn btn-link popover-notitle">
<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>add break
</a>
Can anybody help me?
Since the button is just written in a string, it isn't being compiled by Vue. Here are a couple of ideas to try:
Use Vue for popover as well: https://yuche.github.io/vue-strap/#popover
Create popover content in a separate div (in your component so Vue will compile it) and then fetch the content for the popover:
{
content: $('#myPopoverContent').html(),
html: true
}
I am trying to understand how the show/hide logic of a dropdown in twitter bootstrap works.
I can declare a dropdown menu in a navbar purely with HTML, and yet it seems that Javascript is involved with showing/hiding the dropdown. Also the dropdown disappears if I focus out by clicking on an unrelated area on the page.
Question part 1: Where can I find the Javascript code that is involved with Dropdowns in bootstrap?
Question part 2: Is it somehow possible to tap into the event logic and execute some custom Javascript code when a certain dropdown receives a focus out event? For example so that I can hide another (unrelated) element on the page when the dropdown looses focus?
To be more precise:
Lets say I declare a bootstrap dropdown purely in HTML (this would be inside a ul.nav.navbar-nav):
<li role="presentation" class="dropdown">
<a id="mainmenu" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
Lectures <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</li>
Now somewhere else on the page I have the following HTML:
<div id="#background" style="display: none">
<img src="...">
</div>
When I click on the dropdown button bootstrap will show the dropdown, but want two additional things to happen:
The div#background should be shown
Assuming I click somewhere outside the dropdown (which will cause bootstrap to close it), I want the div#background to be hidden again.
I think it should somehow be possible to register my own callback function on some bootstrap event and show/hide my div from that callback, like so:
/* just to illustrate my idea */
hide = function(element) {
element.style.display = "none"
}
show = function(element) {
element.style.display = "block"
}
}
So how and where could I register the hide and show functions such that they get called when I open/close the dropdown and also when I click on an unrelated area on the screen, which will cause the dropdown to close.
If this is possible to achieve purely in HTML by attaching some data-* elements to my div#background then I would like to know about that too.
First:
Do you think about something like this?
$('.dropdown-toggle').dropdown();
Got it from w3schools.com
Second:
You can do call the dropdown link
$('#element').click( function(){
$('#dropdownElement').dropdown();
});
Is that what you are looking for?
I have drop down which is basically a div that is displayed in a block, When I click on a button. Each value/item in a drop down is div. Dropdown value is something like this "Click to view report <img-help>". Now my question is when i try to open the drop down and click on a item, i see that sometime <img-help> is clicked and the test is failing as clicking on image will open a help window and it is not actually selecting the item in the dropdown. How can avoid this and just click on the text?
I basically click on the button and parse through the list and then click on the value that matches on what I want to click using Selenium Java api.
updating the code that i am trying to click I am trying to click "XXXXXXXYYYYYYXXXXXX" in the div. which will refresh the page with new data.
Also wanted to mention that I am doing this in IE7. Firefox seems to be working fine.
<div class="mstrListBlockItemSelected" title="Evaluate charges to identify potential for improvement.">
<div class="mstrListBlockItemName" style="padding-left: 25px;">
XXXXXXXYYYYYYXXXXXX
<span style="width: 4px;"/>
<img style="width: 16px; height: 16px; cursor: pointer;" alt="Help" src="../plugins/custom/images/help.gif"/>
</div>
</div>