I am working on a UI automation project. I have to fill details in a form and click on 'Save' button. Once save button is clicked in manual flow, it turns grey and disabled. And after that a pop-up emerges to confirmation.
But when I run automation script to hit 'Save' button, script hits the button but it doesn't turn grey and still enabled. And I don't see any confirmation pop-up.
I tried lots of solutions for clicking 'Save' button, some of them are listed below but nothing works
cy.contains('Save').click()
cy.contains('Save').click({force:true})
cy.contains('Save').focus().type("{enter}")
cy.get('button span.MuiButton-label').contains('Save').click({force:true})
cy.get('span.MuiButton-label').contains('Save'). then($btn => {
cy.wrap($btn).scrollIntoView().click({force:true});
})
I am also attaching html for 'Save' button
I would be really thankful, if you please help me in finding solution for it.
What I can see from the image is the button contains some span and other empty elements if you can give the button an id this way you job would be much simpler
cy.get('#form-btn').click()
if not then treaverse from the main-content to the form then to the button
cy.get('#main-content').get('form').get('button').click()
Add data-cy="save" to your button and
Do this:
cy.get("[data-cy=save").click()
You can directly use the button text and click on it.
cy.contains('Save').should('be.visible').click({force: true})
If you have shadow DOM in the HTML, turn on includeShadowDom either in global config or in the test config.
Target the button in the cy.contains(). cy.contains('Save') will target the label, but that may not be clickable:
it('fills form', {includeShadowDom: true}, () => {
// fill form fields
cy.contains('button', 'Save').should('be.enabled').click()
})
All of the above answers were correct.
Additionally, you also want to check the colour change after clicking on the Save button. So you should have to check the CSS file and check the colour. I'm assuming here the button has some property color and you have to just use that HEX code for the colour. I used Charcoal colour as I don't know which grey shade your app used.
cy.contains('Save')
.should('be.visible')
.click({ force: true })
.should('have.css', 'color', 'rgb(54, 69, 79)')
Related
Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation
My alerts and dialog buttons are white in color after i have upgraded my NativeScript version to the latest one.
Please help me retrieve its original black color...
var dialogs = require("ui/dialogs");
dialogs.alert({
title: "Be Aware",
message: "Make sure you receive money from the customer before you REDEEM.",
okButtonText: "Customer Paid"
}).then(function () {
console.log("Dialog closed!");
});
Customer Paid button is white
The solution was found in the comments.
The problem was linked to a CSS property generated for an other button.
This property was also affecting the button in the modal.
Solution
Use another class/id/selector for the modal's button
OR
Use the same selector than the other button and change the values inside the CSS
The basic idea is to have a grid where a user double-clicks the row and opens a modal window (Bootstrap panel) with a panel-body section to edit the data, and a panel-footer with a btn-group to "Save", "Cancel", or "Close" with some logic built in to handle the button's state and onclick events accordingly.
Since there will be many grids and many modal windows throughout the project, and although the panel-body section will vary for each one of them, the panel-footer will likely be the same for them all and I would like to use only one panel-footer as a template, but I don't know how to.
At the moment, here is how it works:
In the project, there are two forms: frmCustomer and frmUnit.
frmCustomer panel-footer has buttons #btnSaveCust, #btnCancelCust, and #btnCloseCust.
The jQuery script has events hooked up to each of those IDs and works as expected $(document).on("click", "#btnSaveCust", function () { SaveCust(); });
frmUnit works the same way except with the name changed to #btnSaveUnit and the event changed to #btnSaveUnit and SaveUnti().
Now, if I do a template, the buttons' IDs would change to #btnSave, #btnCancel and #btnClose.
How would I know how to call SaveCust() or SaveUnit()?
UPDATE 1: I just realized that this is not going to work, since we cannot have duplicated id's, the btns in the shared view (template?) must have to be renamed every time they are used in another form
Here's something that should help
Updated fiddle, this one tells you which form the button is in
For the updated fiddle, click on the buttons, which opens the modal. I have a form that is dynamically added to the modal when you click on the button. Then inside the modal, click on the submit button, and it will alert which form you're in. Close out of the modal and try another button and you'll see it alerts with the updated form, and clicking on that submit button tells you which form you clicked on
The idea is, you have one button event handler for a class rather than an id. This will make any button with a certain class behave the same way. Now the next step is the button logic.
If you look at the fiddle, where I handle the .open-button logic, I take the id of the button that was clicked on, append the string -modal to it, and it opens the matching modal. You can replicate this with a form, I believe, and use some sort of name matching the same way.
Also, look at the message that appears when you close the modal, you can use this type of logic to target a form and do form.submit or something similar. This should make all your buttons have only one click event handler and apply to multiple forms/modals
This is better than having the click event handler, and having a bunch of if (something) else if (something) else etc... you just do a quick and easy string manipulation and get the element you want and submit that form.
Let me know if that helps
Sorry for the strange title question.
I am wondering how to do the following:
When a user clicks on the blurred out textarea through onfocus, it will display: block the div around it, displaying a "textarea console" and then a "add step" icon beneath the textarea. If you click out, it will blur the textarea along with two extra items.
However, what I would like to add is, if they click either the "textarea console" or the "add step" icon, the div will not blur out.
Here's what I have so far at jsfiddle.net
I've updated the jsFiddle: HERE
I think it was just a few things wrong...you were on the right track.
$("#textareasteinstruc").focusout(function() {
alert('focusout');
$(".textareaconsole").hide();
$("#addPrepStepButtonicon").hide();
The # was missing from focusout function...and classes/IDs were not referenced properly.
It's working the way you want it now I'm thinking :)
UPDATE: I added the $("#addPrepStepButtonicon").show(); to the click event so the 'submit' button will appear again
Check this one http://jsfiddle.net/wAaDz/13/ . Have made changes.
Close button is not working in the lyte box,while the link is working but i want button instead of link there by i can easily apply css to my button.
thank u
Your question is hard to understand, but by the sounds of it you want to style the close 'button' with css. You say the link still works, do you mean there is a link with the text 'Close'? If so then there is probably a problem with your image linking. Either way you can still style that link it has the id 'lbClose'.
a#lbClose {
}
You are correct, the lytebox close button is not a real button but a hyperlink. To use a button instead of a link, you would have to change the lytebox code (Which you most certainly can). Or, you could set the close button to not display (there is a property you can set to false in the lytebox.js: this.showClose) and in your iFrame code add a button to do whatever you need it to do.