How can I use jsonAssertion.softAssert to assert that an element is visible

user_18302697 0
Viewed 232

I'm using softAssertions in my Cypress test. I was able to use the softAssert() method to verify the text in an element, but I'm trying to figure out how to use the softAssert() method to assert that an element is visible. In cypress it is simple I use .should('be.visible') but I can't seem to make it work with the softAssert() method. The elements that I am trying to assert are input fields,tables and buttons. I gave a simple example below.

Thats how I did it:

const jsonAssertion = require("soft-assert")

Cypress.Commands.add('softAssert', (actual, expected, message) => {
  jsonAssertion.softAssert(actual, expected, message)
  if (jsonAssertion.jsonDiffArray.length) {
    jsonAssertion.jsonDiffArray.forEach(diff => {

      const log = Cypress.log({
        name: 'Soft assertion error',
        displayName: 'softAssert',
        message: diff.error.message
      })
    
    })
  }
});

Cypress.Commands.add('softContains', (actual, expected, message) => {
  jsonAssertion.softContains(actual, expected, message)
  if (jsonAssertion.jsonDiffArray.length) {
    jsonAssertion.jsonDiffArray.forEach(diff => {

      const log = Cypress.log({
        name: 'Soft assertion error',
        displayName: 'softContains',
        message: diff.error.message
      })
    
    })
  }
});

  Cypress.Commands.add('softAssertAll', () => jsonAssertion.softAssertAll())

This is mine custom commands and this is the actual test

describe('Load Validation Test', function(){
    const jsonAssertion = require("soft-assert")
  
    it('Load Validation Test', function(){ 
        cy.get('input[placeholder="Activity Name"]').should('be.visible')
        cy.get('div table[class="table table-striped b-t b-light table-nowrap"]').should('be.visible')

    })
  })
cypress automation
3 Answers

As I can see in the soft-assert npm library, they support all the below methods and I cannot see a method for checking visibility.

1.  deepAssert(actual, expected, msg, ignoreKeys)
2.  softAssert(actual, expected, msg, ignoreKeys)
3.  deepContains(actual, expected, msg, ignoreKeys)
4.  softContains(actual, expected, msg, ignoreKeys)
5.  deepAssertKey(actual, expected, key, msg, ignoreKeys)
6.  softAssertKey(actual, expected, key, msg, ignoreKeys)
7.  deepContainstKey(actual, expected, key, msg, ignoreKeys)
8.  softContainsKey(actual, expected, key, msg, ignoreKeys)
9.  deeptTrue(value, msg)
10. softTrue(value, msg)
11. deepAssertKeyAbsence(actual, key, msg)
12. softAssertKeyAbsence(actual, key, msg)
13. softAssertAll()

Alternatively, if you just want to test whether the element is visible or not and do some actions without failing the test you can:

describe('Load Validation Test', function () {
  it('Load Validation Test', function () {
    if (Cypress.$('input[placeholder="Activity Name"]').is(':visible')) {
      //Element is visible, do something
    } else {
      //Element is not visible, do something
    }
  })
})
user_45712710

It is doable, but you need a wrapper to extract the actual and expected values

Cypress.Commands.add('softVisible', {prevSubject:true}, 
  (subject, expectedCondition, message) => {

    // translate expectedCondition to true/false
    const expected = expectedCondition === 'be.visible'
  
    // get actual from subject
    const actual = subject.is(":visible")

    cy.softAssert(actual, expected, message)
})

// usage
cy.get('input[placeholder="Activity Name"]').softVisible('be.visible')
cy.get('input[placeholder="Activity Name"]').softVisible('not.be.visible')

Be careful about using softVisible, if you want to control test flow

cy.get('input[placeholder="Activity Name"]')
  .softVisible('be.visible')
  .type('my activity')

This will not wait for visibility before running .type().

user_169977070

In addition to your two methods softAssert and softAssertAll, you just need to add one more, to verify when one element is present or not. Like this.

Cypress.Commands.add('isTheElementPresent', (ele) => {
    cy.get('body').then($body => {
        if ($body.find(ele).length) return true
        else return false
    });
})

Then, in your test you can combine those methods in this way:

cy.isTheElementPresent('.site-description').then(isTrue => {
  cy.softAssert(isTrue, true, "expected this element to be present!");
})

// Here we can put extra assertions or any other additional code...

// Finally:
cy.softAssertAll();
user_129361300
Related