'Cypress - 'Button' is invisible when all fields have been completed

I am working on web application and using cypress to create testcase. That application is developed in angular, and I have to fill all the required fields and click save button.I have input field and 2 combox box(mat-select) fields and 1 upload button after all these are filled completely save button should enable.save button is not enabled even after all fileds are filled.can anyone provide solution for this?

beforeEach(() => {
    cy.fixture('Models-add.json').as('add')//.then(function(data)
})
it('Simulators Add testcase', function(){
    //clicking Add button
      cy.get('.button-text').click()
    //Adding 
      cy.get('input#mat-input-0').type(this.add.Name)
      
      cy.get('input#mat-input-0').should($inputs => {
        //cy.log($inputs.val().length)
      
      const val = $inputs.val()
      expect(val.length).not.be.lessThan(3)
      .and.have.not.to.be.greaterThan(126)
      
    })
  })
     //selecting static dropdown from make 
     it('selecting static dropdowns', ()=>{ 
     cy.get('mat-select').as('listbox')
     cy.get('@listbox').first().click()
     cy.get('.mat-option-text span')
     //.contains('Intel')
     .then(option => {
        option[0].click({multiple:true});
        
    });
    //selecting type
    cy.get('mat-select').as('listbox1')
     cy.get('@listbox1').last().click()
     cy.get('.mat-option-text span:visible')
     //.contains('ACTUATOR')
     .then(option => {
        option[0].click({force: true});
       // cy.get().should('have.value','ACTUATOR')
     })

}) it('DD file upload', ()=>{ const DDfilepath = 'Device-variable.json' //'C:\CypressAutomation\cypress\fixtures\Device-variable.json' cy.get('button.button-upload-parts').click({force: true}) cy.get('input.form-control[type="file"]:visible').attachFile(DDfilepath) }) it('Save button click', ()=>{ var empty = false; cy.get('simulator-part-form > form').each(($item, index, $list)=> { if ($item.val() == '') { empty = true; } }) cy.log(empty) cy.get("button[type='submit'] span[class='mat-button-wrapper']").as('savebtn') if (empty) { //cy.get("button[type='submit'] span[class='mat-button-wrapper']")//invoke('prop', 'ng-reflect-disabled', true); cy.get('@savebtn').should('be.disabled') } else { // cy.get('@savebtn').invoke('removeAttr','disabled').click() cy.get('@savebtn').should('not.be.disabled') // cy.get("button[type='submit'] span[class='mat-button-wrapper']").invoke('prop', 'ng-reflect-disabled', false); cy.get('#mat-dialog-0 > simulator-part-form > form > div.mat-dialog-actions.form-btns > button.mat-focus-indicator.btn-cancel.mat-raised-button.mat-button-base > span.mat-button-wrapper').click() } })



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source