I am trying to click a button using Selenium.
Below is the code
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text"> … </span>
</button>
I tried to do this by the css selector:
clickbutton=driver.find_element_by_css_selector("button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only")
**My error: Unable to locate element: { method: "css selector","selector":"button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only"} **
Am I approaching this wrong? Im not understanding the error. Shoud I use another Locator?
Your css selector is ok the problem is related to html code which setting aria-disabled="false" for compability. For Web3 documentation it means that related element and descandent are active but in your case it is not working.
Simple you can set the aria-disabled="true" then you can interact with the button but even you set it back to false it still works. To change the button attribute, you can use execute_script. Alternative to your css you use this css too: .ui-dialog-buttonset > button
>>> dr.find_element_by_css_selector(".ui-dialog-buttonset > button").get_attribute("aria-disabled")
u'false'
>>> dr.execute_script('document.querySelector(".ui-dialog-buttonset > button").setAttribute("aria-disabled", true)')
>>> dr.find_element_by_css_selector(".ui-dialog-buttonset > button").get_attribute("aria-disabled")
u'true'
>>> dr.find_element_by_css_selector(".ui-dialog-buttonset > button").click()
Related
I'm building a reusable component that will take sensitive data and include a toggle to show/hide that data. Hidden data is replaced with a PrimeNG skeleton. The problem I'm trying to solve is that if the <ng-content> is empty, I'd rather just show a - than the skeleton to prevent having to toggle it, just to find no data.
<ng-container *ngIf="dataIsMasked; then maskData else showData"></ng-container>
<ng-template #maskData>
<span class="skeleton-container">
<p-skeleton></p-skeleton>
</span>
<span class="no-data-placeholder"> - </span>
</ng-template>
<ng-template #showData>
<span class="data-mask-container">
<ng-content></ng-content>
</span>
</ng-template>
..code to toggle button & component variable...
I'm attempting to use some CSS selectors to determine if the content is empty or not, but on instances where the .data-container is empty, the styles aren't applied to .skeleton-container:
.data-container:empty + .skeleton-container {
display: none;
}
Meteor 1.6.1.1 is the latest version of my project. I am using package ian:accounts-ui-bootstrap-3 instead of accounts-ui. I have added a custom field as <select> in the code.
What I get on Screen is as below.
When I saw the HTML code, it is not adding class="form-control" to select tag.
below is the code when I inspect element on UI using Chrome.
<li id="login-dropdown-list" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sign in / Join <b class="caret"></b></a>
<div class="dropdown-menu">
<div class="select-dropdown">
<label>State</label><br>
<select id="login-state">
</select>
</div>
<button class="btn btn-primary col-xs-12 col-sm-12" id="login-buttons-password" type="button">
Create
</button>
<button id="back-to-login-link" class="btn btn-default col-xs-12 col-sm-12">Cancel</button>
</div>
</li>
All I want is to add class="form-control" to the select tag dynamically when component loads on screen and it must look like below;
I have tried below code, but it is not working;
Template.HomePage.onRendered(function () {
document.getElementById('login-state').classList.add('form-control');
});
Well, I tried one way to achieve this is by using Template event as below,
Template.HomePage.events({
'click #login-dropdown-list': function(event){
//document.getElementById('login-state').classList.add('form-control');
$('#login-state').addClass('form-control');
}
});
As you can see, the component gets loaded inside the li tag with id="login-dropdown-list". I simply loaded the class on click event. Even the commented code works fine.
Is this a good solution? please let me know if there much better answer to this? If it works I will definitely accept and upvote the answer.
I have the following setup:
<div data-ng-repeat="item in navigationBar.navObject.items" class="btn-group">
<button data-ng-class="{current: $last}" class="btn btn-default btn-xs" type="button" data-ng-click="navigationBar.goToState(item)"> {{item.name}}</button>
<button data-ng-hide="item.isTerminal" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button">
<span class="fa fa-fw fa-caret-right"></span>
</button>
<ul class="dropdown-menu">
<li data-ng-repeat="subItem in item.subItems"><a data-ng-click="subItem.item.goToState()">{{subItem.name}}</a></li>
</ul>
</div>
And I would like the icon in the dropdown to change from fa-caret-right to fa-caret-down when the dropdown list is visible. Is there any way to do this strictly with CSS?
You won't be able to change the attributes of HTML elements using CSS, you'll probably want to use jQuery instead.
Bootstrap has some nifty JavaScript going on, where you can execute your own scripts when boostrap elements inside your website is used.
Initialize dropdown using this inside jQuery.
$('.dropdown-toggle').dropdown();
When it's called you can hook different actions to it using the handles specified on the bootstrap docs.
on('show.bs.dropdown', function(){}); is just a fancy word for saying "on dropdown"
$('.dropdown-toggle').on('show.bs.dropdown', function () {
// All actions to fire after the dropdown is shown go here.
$('.fa .fa-fw').addClass('fa-caret-right');
$('.fa .fa-fw').removeClass('fa-caret-down');
})
I know this is an old post, but I was looking for this solution and have one that works for me. You can target and change the pseudo element inside that span. When you click the button, doesn't the button add an open class? So, then the css would look like:
btn.open .fa-caret-right:before { content: "\e114"; }
Use the .open added to the button class.
The \e114 being the character of the down arrow.
Still new to selenium and css/xpath locators. I stumbled across a problem where CSS works but the equivalent XPath doesn't, and I'd really like to know why. I'm using Scala in the examples but it's still the normal Java Selenium2 library. I also use the FirefoxDriver
Here's the interesting part of the HTML:
...
<li class="k-item k-filter-item k-state-default k-last" role="menuitem" style="z-index: auto;">
...
<form class="k-filter-menu k-secondary">
<div>
<div class="k-filter-help-text">Show items with value that:</div>
<span class="k-widget k-dropdown k-header" style="" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-widget k-datetimepicker k-header" style="">
<div>
<button class="k-button" type="submit">Filter</button>
<button class="k-button" type="reset">Clear</button>
</div>
</div>
</form>
</li>
...
I'm getting the li with
val filter = driver.findElement(By.cssSelector("li.k-filter-item"))
which works for me.
Then, I want to find the button. It's a dynamic menu thingy sliding out and what not, so I need to wait for it to appear:
new WebDriverWait(driver, selectorTimeout).until(
new ExpectedCondition[Boolean] {
override def apply(d: WebDriver) = {
filter.findElement(By.cssSelector("button[type=submit]")).isDisplayed
}
})
And that works nicely, too. My question is, why doesn't the xpath equivalent work:
new WebDriverWait(driver, selectorTimeout).until(
new ExpectedCondition[Boolean] {
override def apply(d: WebDriver) = {
filter.findElement(By.xpath("//button[#type='submit']")).isDisplayed
}
})
Anybody?
[EDIT]
Selenium version: 2.35.0
FireFox driver: 2.35.0
I will try it with Opera now.
You'll need the . in front of the XPath selector anyway, so that it'll search the current element's descendants/children:
.//button[#type='submit']
Sometimes, a more elaborate XPath can also help:
.//descendant::button[#type='submit']
I have a checkbox that is not a "real" checkbox. The CSS looks like:
<li id="privileges:1" class="ui-tree-parent default" data-rowkey="1">
<div class="ui-tree-node ui-state-default" aria-checked="true" aria-selected="true" aria-expanded="true" role="treeitem">
<span class="ui-helper-clearfix ui-tree-node-content ui-corner-all ui-tree-selectable-node">
<span class="ui-tree-icon ui-icon ui-icon-triangle-1-s"></span>
<span></span>
<div class="ui-tree-checkbox ui-widget">
<div class="ui-tree-checkbox-box ui-widget ui-corner-all ui-state-default">
<span class="ui-tree-checkbox-icon ui-icon ui-icon-check"></span>
The last span appears when the checkbox is checked.
My coworker had the following code which after review appears to be black magic and shouldn't validate anything:
WebElement checkedBox = findElementByXpath("//li[#id='privileges:1']/div[#aria-checked='true']/span/div/div");
#SuppressWarnings("unused")
Boolean isChecked;
isChecked = checkedBox.findElement(By.xpath("//li[#id='privileges:1']/div[#aria-checked='true']/span/div/div")).isSelected();
What is the best way to validate the checkbox is checked using Selenium2/Webdriver?
This does not work:
WebElement checkedBox = findElementByClass("//li[#id='privileges:1']/div/span/div/div/span[#class='ui-tree-checkbox-icon.ui-icon.ui-icon-check']");
assertTrue(checkedBox.isEnabled());
Nor does:
WebElement checkedBox = findElementByClass("//li[#id='privileges:1']/div/span/div/div/span[#class='ui-tree-checkbox-icon.ui-icon.ui-icon-check']");
assertTrue(checkedBox.isDisplayed());
You have period/fullstops where the spaces should be in the XPath.
The period/fullstop will only work in CSS selector. Also you seem to be using the By ClassName function and passing in an XPath query. I'll assume this was just a typo.
This is what you have:
//li[#id='privileges:1']/div/span/div/div/span[#class='ui-tree-checkbox-icon.ui-icon.ui-icon-check']
It should be:
//li[#id='privileges:1']/div/span/div/div/span[#class='ui-tree-checkbox-icon ui-icon ui-icon-check']
Tip in case you didn't know: If you open Chrome Developer tools, go directly to the Console, type in:
$x("//li[#id='privileges:1']/div/span/div/div/span[#class='ui-tree-checkbox-icon.ui-icon.ui-icon-check']")
You'll see it returns nothing.
Do the same with this:
$x("//li[#id='privileges:1']/div/span/div/div/span[#class='ui-tree-checkbox-icon ui-icon ui-icon-check']")
It'll return something. Both Firebug and Chrome Developer tools can be used to execute CSS and XPath selectors. So you can see if the issue is with Selenium or the selector you are using.