We Keep Coding

Not able to click save button in cypress

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)')

Interrogate state of TinyMCE so as to re-initialise in the same state

I am using TinyMCE 5. I have an image_list defined, which I need to change dynamically as images are manipulated elsewhere in the page.
I do this by calling tinymce.remove() followed by tinyme.init(), initialising with a new config object which has the updated image_list.
However if the user has changed the state, e.g. by clicking 'paste as text', when the editor re-initialises those changes will be lost.
Can I interrogate the editor state, so I can re-initialise it to the same state it was in when it closed?

Each time you toggle Paste As Text the editor does fire an event (PastePlainTextToggle) so you could choose to listen to that event and keep track of if it is toggled on or off.
You could then (upon reinitialization of the editor) call editor.execCommand('mceTogglePlainTextPaste') to enable it if that was the last state set during the prior editing session.
Here is a TinyMCE Fiddle showing how you might be able to track this setting:
http://fiddle.tinymce.com/DRgaab

Found one way to do this:
tinymce.editors.<your text area name>.plugins.paste.clipboard.pasteFormat.get()
will return 'text' or 'html' according to the current 'paste as text' setting.
Of course this is undocumented, so not ideal.

I've now found a way of doing this that is documented: TinyMCE 5 Docs
The ExecCommand event is fired when (almost) any toolbar button is clicked, providing a way to keep track of the Editor state by adding to the editor config object something like:
setup: function(editor) {
editor.on('ExecCommand', function(e) {
alert('command was '+e.command+', value was '+e.value);
}
)}
In the case of the 'Paste as text' button, the command value is 'mceTogglePlainTextPaste'.
Then continue as above in Michael Fromin's answer

Is it possible to share one button click in different forms?

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

Updating the state of a button in a text editor

I'm trying to develop an app for ipad and I'm using the contenteditable feature. I have created 3 buttons (bold, italic, underline) and when someone taps them they perform the functionality using execCommand. However when the user selects a word that is bold I want to change the state of the Bold icon image so that it lets the user know that the selected text is in bold. This feature is available in programs like ckeditor and tinymce but I want to know how it's done. I know that some people use a timer that checks all the states every second but I don't think that's the right way. Could someone help me with the code or explain how this could be done.

look up the document.queryCommandState() method to find your answer
I believe you pass a flag which returns true or false, such as...
if(document.queryCommandState("Bold")){ highlightBoldBtn(); }
EDIT
To clarify, if I understand you correctly this will work. This is how I did it with my editors. Just add a 'onclick' and 'onkeyup' event to your contenteditable div or textarea like the following
// this array is for every button you implement on your editor
var buttonarr = ["Bold", "Italic", "Underline"]
// here is the onclick/keyup function for your element
function updateButtons(){
for(var i=0; i<buttonarr.length; i++){
var buttontype = buttonarr[i];
if(document.queryCommandState(buttontype)){
// call function to turn this button "on" or use jQuery
$('#btn_'+buttontype).addClass('button_on');
}
}
}
If you noticed, what I did was gave each of my buttons the ID of "btn_" with the button flag appended to it. Using CSS I then made a button_on class that styles it accordingly. You may want to simply remove the 'button_on' class from all buttons on each call to updateButtons(), and then add the class back on as it returns true.

How to make CKEditor update the text content without using JQuery?

I am using CKEditor for mailbox. After typing the content in the editor, I need to click on send button. After clicking the mail goes, but without the content that I have typed in it.
This is because the CKEditor is not updating the value of content until I select the typed text and perform some operation from the toolbar, like Bold, Italic etc.
I have added a javascript: onclick to the send button and trying to reload the editor or perform some operation from toolbar .
Neither I can use JQuery nor any plugin to solve this. What else can I try for this?

Try adding this function to the page and call it on the onclick of the button. It'll update the textarea's with the value of the ckeditor
function UpdateFields() {
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
}