Disabled button in cypress - automation

I would like to click on a button but in code it is showing as
"button aria-disabled=:false". How to change this in "true" and click the link using cypress?

Generally, it's the disabled attribute not the aria-disabled attribute that prevents Cypress from clicking. Even so, you should identify the button by aria-label
cy.get('[aria-label="Expand Row"]').eq(0).click({force:true})`
There is a problem in the app, the data-test-id has undefined on the end which probably means the code that adds that attribute has a bug.
You would expect it to be something unique like data-testid="expander-button-1".

I used ":first-child" and then click on button.
cy.get('#row-0:first-child').click() and it works. Thank you all for your help.

You should simply be able to use .click() after the finding the element. aria-disabled=false would imply that the button is enabled (not disabled).
cy.get('[data-testid="expander-button-undefined"]').eq(0)
.click();
If that is not working, it may be inheriting a disabled state from the class, role, or type. Without seeing where exactly it would be disabled, I can't recommend a strategy other than using force: true.
cy.get('[data-testid="expander-button-undefined"]').eq(0)
.click({ force: true });

Related

Quasar QSelect popup and input text persistent on click

I am trying to set up a QSelect driven by user input in order to achieve an "autocomplete" behavior. There are a few examples on the official documentation and they make use of the #filter callback.
I have currently two problems:
Whenever I click outside of the input field the input text is lost and the popup disappears.
If I click on the input the current text remains, but the pop is hidden until I click on it again.
For the latter issue, one workaround is to force the popup to show upon click:
<q-select
ref="input"
...
#click.native.prevent="onClick"
>
...
onClick(){
if( this.searchFilter.length > 0){
this.$refs.input.showPopup()
}
}
However, the inconvenience is that the popup still shortly disappears for a short while before showing again. I've also tried using #click.native.stop instead of #click.native.prevent to no avail.
As for issue number 1 I haven't even found a workaround yet.
Here is a related issue, though the popup disappearing was a wanted behavior in his case.
I set up a basic Pen to illustrate the issue. Try clicking on the input or outside the input at the same height.
The trick was to use #click.capture.native and then conditionally stop the propagation inside the callback function via event.stopImmediatePropagation() See it working here

Buefy - Close notification on click anywhere

I'm wondering if it is possible to modifiy the notification system of buefy so that it closes itself when I click anywhere on the notification, not just on the x-cross generated by closable: true.
I have been looking for solutions to change the default behavior of buefy elements, but I haven't found anything coming close (no pun intended).
Any help would be very much appreciated.
edit: I want to close the notification by clicking on it, not outside of it. But I don't know how to attach the onClick behaviour to the buefy element as a whole.
Actually you need to catch click anywhere on the page and then:
isActive = !isActive
The question how to catch click outside the element is answered here:
Detect click outside element
But watch out! Preferred answer is not working in Vue.js 2. You can try to use this package: https://github.com/MuTsunTsai/vue-on-clickout
You could use v-clickaway to detect click outside your element:
Vue-clickaway
and then set your flag to true

Clicking label element that unfortunately contains a link

I'm running into an issue where I'm attempting to click on a checkbox. The app is written in AngularJS.
The checkbox can not be clicked, as technically the element is not visible. Using 'visible: false' does not help to get this box checked. I have also tried to use element.set(true)
The checkbox is within a label element that happens to also contain hyperlinks. Since Capybara/Selenium clicks on the middle of an element by default, I end up opening the hyperlink instead of marking the checkbox. Clicking within anywhere in the label (outside of the hyperlinks) checks the box successfully.
How can I achieve this?
I would recommend using JavascriptExecutor to click element. In case element is technically not visible Webdriver will not allow you to click it using API, as it tries to simulate real user actions. Nevertheless you have the option to execute JS directly, which doesn't really care.
This answer will help you with the code part:
https://stackoverflow.com/a/19934852/2998104
You would need to change ending slightly to:
JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement element = driver.findElement(By.xpath("exact_locator_of_checkbox"));
js.executeScript("arguments[0].click()",element);
Of course no need to use only xpath, but anything that help you point to the checkbox directly.
Took me a little while but I figured out that I can avoid the Capybara API and use WebDriver's ActionBuilder.
def agree
source = find('label.terms-label').native
actionbuilder = page.driver.browser.action
actionbuilder.move_to(source, 0, 0).click.perform
end
By default, the Capybara API (as well as other native Selenium methods) will click in the center of the element. This will avoid that and will find the element and click it at (0, 0) coordinates.
As of Capybara 3.0.0, you can specify an offset when you call click on an element. So if you want to click the top-left corner of the element box, you'd say:
find('label.terms-label').click(x: 0, y: 0)
(Note, you must specify :x and :y if you specify either)
API Docs
Relevant commit

Selenium WebDriver - Have a button with two click zones and selenium is not clicking properly

Ok guys,
I'm QAing a claims application by guidewire and this is where im running into an issue.
The header area has header buttons and one of them is Claims, this button has two click zones, when you click on the claims label it recalls the last claim you had opened, when you click the down arrow, it opens and shows you more options.
The option I want to get to is "New Claim"
FirePath shows me two seperate xPaths
For the claim label: .//[#id='TabBar:ClaimTab-btnInnerEl']
For the downarrow label: .//[#id='TabBar:ClaimTab-btnWrap']
Once the downarrow is initiated the xpath for New Claim: .//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']
However when I write my script:
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab-btnWrap']")).click();
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']")).click();
it constantly keeps clicking on the wrong area and recalling the last claim and the script fails.
Here is a screencast of the behavior expected:
http://screencast.com/t/jtI1kGkfmXK
and here is basically what its doing
http://screencast.com/t/s2Q6VrbJl
What can I do to circumvent this issue? Its driving me crazy.
I took help from here
Try this code, and see if it works:
driver.findElement(By.xpath("//span[#id='TabBar:ClaimTab-btnWrap']")).sendKeys(Keys.ARROW_DOWN);
Well what I can gather is you have to get to the "New Claim" span and click it.
You can use Javascriptexecutor and directly click on the "New Claim" even without bringing it up. It helps that your intended element to be clicked has a unique id.
So you can use the following :
var js = Driver as IJavaScriptExecutor;
if (js != null)
{
js.ExecuteScript("document.getElementById('TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl').click();")
}
You need to click open the window and wait for that to open.So,
Some wait needed after your first click
Then, You probably have to use switchTo() to set focus on the newly opened dropdown window. Some examples how to use it are here. After that use a textbase search for finding your element. Something like this.
EDIT:
I found text base search helps a lot in such cases.
try this:
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab-btnWrap']")).click();
//use some static delay for now. But, really you should use some fluent wait for the element to appear.
driver.findElement(By.xpath(".//*[.='New Claim']")).click();
I figured it out! I had to use the actions class but this worked!
Its a little weird but it works
WebElement element = driver.findElement(By.linkText("Claim"));
Actions builder = new Actions(driver);
Action dropdown = builder.clickAndHold(element)
.sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN)
.build();
dropdown.perform();
driver.findElement(By.xpath(".//*[#id='TabBar:ClaimTab:ClaimTab_FNOLWizard-textEl']")).click();

Headless browser with mouseover event

I'm using phantomjs with selenium to click a button. Unfortunately, that button is disabled, and only enabled when there's mouseover/click event in the real browser. Is there any way to simulate that in PhantomJS?
I tried ActionChains, but it still doesn't work (the button is still disabled):
ActionChains(driver).move_to_element(button).perform()
I believe that your problem is not PhantomJS, but rather Actions. When you use actions, you should link all of your actions together, and then perform the action. In this case, it would be:
ActionChains(driver).move_to_element(button).click(button).perform();
Please try the following code:
browser.actions().mouseMove(element(by.css(button))).perform();