I am trying to find out css selector for "Clear" button, as mentioned in below script:
<a href="" class="slds-button slds-button--neutral search-button"
ng-click="vm.clearFilter()" style="">Clear</a>
I have tried :
a[href*="Clear"]
a:contains('Clear')
a[*'Clear'*]
I am expecting to get a click on "Clear" button.
If your are trying to reach that button with the text, then it's not possible.
How about putting an id:
a#clearButton{
background:red
}
<a href="" id="clearButton" class="slds-button slds-button--neutral
search-button">Clear</a>
I see you use AngularJS, the id can be added via the code
Related
I want to open a table tab in a new window to interact with the component separately. What's the best recommended method to do this functionality in React.js?
try this pls . <a href="URL_LINK" target="_blank"/>.
such as :
<a href="http://localhost:3001/users" target="_blank"/>
<a href="http://localhost:3001/personels" target="_blank"/>
You can try target="_blank" for opening new tab if you are using <a href="SOME_URL" target="_blank"/>
or you can use onClick event as shown onClick={()=> window.open("someLink", "_blank")} if you just need to put on button .
I have some text which I'd like to be clickable.
And I want the picture to be opened when I click the certain word in a new window (not in a new tab).
How could I do that? The code below does not work.
<p>Click on the "Request Access" button and fill in the form.</p>
<a href="IMAGE_URL" target="_blank">
<img alt='img_path' class='img-40 rounded-circle' src='IMAGE_URL' />
</a>
Just add a target="_blank" to your link if you want to open the destination of a link in a new tab:
Request Access
And define a onClick method to open it in a window :
<a href="./images/TheForm.jpg"
onclick="window.open('./images/TheForm.jpg',
'windowName',
'width=800, height=600');
return false;"
>Request Access</a>
When you specify the width/height, it'll open the link in a new window instead of a tab.
Here is the documentation for further information.
driver = webdriver.PhantomJS()
driver.get(url)
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
driver.find_element_by_css_selector('a.btn_more').click()
I am able to click the get more link using above code
get more
but how to click on followers link?
<div class="my_show__info">
<a class="my_show__link j_get_follow" href="javascript:;" data-follow="followers"> 90</a>
<a class="my_show__link j_get_follow" href="javascript:;" data-follow="following"> 33</a>
</div>
you can form a xpath and click on the link as mentioned below. if you want using CSS. convert the following xpath with css.
driver.findElement(By.Xpath("//div[#class='my_show__info']/a[#data-follow="followers"])).click()
I am not good with CSS but I guess following should work.
driver.find_element_by_css_selector('div[class='my_show__info']>a[data-follow='followers']').click()
In my application, dynamic elements are used which are basically icon/CSS selector references; for ex - save, delete, cancel buttons. These elements doesn't works with xpath's as i have tried with most of the ways. My reading is that the CSS selector will work for these elements. but i'm unable to find it out. Below is the HTML for the same.
Parent class is <div class="rTableCell ActionCell">
under this class <a> tag is used given like below
<a class="SaveRow" onclick="UpdateInlineData(event,'49b3f007-fbc5-492c-b609-8b24a3044ee1','GridDesignation','../MasterData/ManageDesignation')" data-toggle="tooltip" data-original-title="Save" >
under this class <i> tag is used like given below
<i class="fa fa-floppy-o themeSaveIcon"></i>
<div class="rTableCell ActionCell" style="height: 88px;"><a class="SaveRow" onclick="UpdateInlineData(event,'49b3f007-fbc5-492c-b609-8b24a3044ee1','GridDesignation','../MasterData/ManageDesignation')" data-toggle="tooltip" data-original-title="Save"><i class="fa fa-floppy-o themeSaveIcon"></i></a><a class="CancelRow" onclick="ResetInlineData(event,'49b3f007-fbc5-492c-b609-8b24a3044ee1','GridDesignation','../MasterData/ResetDesignation')" data-toggle="tooltip" data-original-title="Cancel"><i aria-hidden="true" class="fa fa-times themeCancelIcon"></i></a></div>
try action chains on selenium API
if you user python you can see this document
for example you have
xpath_element = "a xpath address"
from selenium.webdriver.common.action_chains import ActionChains
hover = ActionChains(self.driver).move_to_element(xpath_element)
hover.click().perform()
you can perform more actions on hover depending on your purpose
I use collapse plugin from Bootstrap, and i also want to change class for another element accordingly (change class of fa-icon).
I also use AngularJS and i liked the idea of using condition in ngClass like this:
<i ng-class="collapsableItemId.hasClass('in') ? 'fa-chevron-up' : 'fa-chevron-down'">
When item is not collapsed bootstrap adds in class to it. I want to try to change icon based on class presence in collapsable item, but did not succeed in it. In bootstrap manual there is also mentioned that collapse generates events which i could probably use, but i also do not know how.
It should work like this. Use ng-click on the collapse toggle element to change some other scope var and then use that var in the ng-class of the icon..
<a href="" data-toggle="collapse" data-target=".collapse" ng-click="isOpen=!isOpen">
<i class="fa" ng-class="(isOpen) ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
</a>
<div class="collapse in">
I'm the collapsible element.
</div>
http://www.bootply.com/nqLf22HCli
<i ng-class="{'fa-chevron-up': abc.isOpen ,'fa-chevron-down': !abc.isOpen }"></i><div ng-show="abc.isOpen">Hi..This div will be show hide and icon will be change accordingly</div>
Use ng-click on collapsing header and put that div which you want to collapse
add ng-show="abc.isOpen".