Cypress

Thank you all. Cypress flow isn't 100% compatible with standard JS Promise (Wait for an own function (which returns a promise) before tests are executed). After relentless testings, I decided to use a Cypress Custom Command wrapper to wrap my in-house JS library. Though adding an extra layer may seem a little cumbersome. But I am satisfied with the result. Share my code here in case anyone might need it. :)

Cypress Code

  before('Prepare TestPlanId', () => {
    cy.getTestPlanIdByName(testPlanName)
    .then((result) => {
      testPlanId = result
      console.log("#01_SDET_testplan:Prepare TestPlanId# "+testPlanId)
    })
  });

Cypress Custom Command

Cypress.Commands.add('getTestPlanIdByName', (wk_testplan_name) => {
  return new Cypress.Promise((resolve, reject) => {
    TESTPLAN_API.getTestPlanIdByName(wk_testplan_name)
    .then(function (data) {
      resolve(data);
    })
  });
})

In-house JS library

export async function getTestPlanIdByName(wk_testplan_name){

  return new Promise((resolve, reject) => {
      config.method = 'get'
      config.url = '/test/plans?api-version=5.0'
      let found = ''

      axios.request(config).then( resp => {
        found = resp.data.value.find(function(item, index, array){
          return item.name === wk_testplan_name
        })
      })
      .then(() => {
        resolve(found.id)
      })
      .catch(err => console.log(err))
  })
}

By using Cypress cy.task Simply define your aws-sdk command in plugins/index.js on task and make sure to include AWS.config.update({region: *REGIONNAME*}) And set your cy.task(doSomething) in your browser test.

Plugin/index.js

on('task', {

getOrg(orgid) {
var AWS = require("aws-sdk");
AWS.config.update({region: *REGIONNAME*}

//e.g AWS SDK command to get a organisation id from dynamodb

Return *null or value or true etc*
 }
}

Cypress test example test.js

orgid = 123;
cy.task ("getOrg",orgid)

The checking of the overlay should be done in two steps.

cy.get('.blockUI.blockOverlay')
  .should('exist')
  .then($overlay => $overlay.remove()) 
cy.get('.blockUI.blockOverlay').should('not.exist')

cy.get('#lead_name', {timeout: 10000})
.should(($el) => {                    // should will cause retry
  return Cypress.dom.isFocusable($el) // instead of visible, more relevent to actionability
})

It's possible if you just do the second step, Cypress passes that command before the overlay is present.

It's the same principle as checjing a loading spinner, which has be tackled on SO before.

BTW you are selecting an element with two classed (according to the error message), so you need two . in the selector.

Perhaps that's the only change you need!

I added another check above that might help. Cypress.dom.isFocusable.

From the docs Is focusable

Cypress internally uses this method everywhere to figure out whether an element is hidden, mostly for actionability.

If you get really stuck, take a look at Gleb Bahmutov's walkthrough video here Debug the Element Visibility Problems in Cypress

One more idea - you can try removing the covering overlay in the test - added a line to the sample above.

I might try this:

cy.get(".ibxudA").find('.WildnessText-kRKTej').should('have.text',"Wildness")

or

cy.get(".ibxudA").find('.WildnessText-kRKTej').invoke('text').then((text) => {
    expect(text.trim()).equal('Wildness')
});

This might be a similar question: How do you check the equality of the inner text of a element using cypress?

Make sure the network intercept is registered before the application makes the call.

it('is registered too late', () => {
  cy.intercept('/todos').as('todos')
  cy.visit('/')
  cy.wait('@todos')
})

In our case, we need to register the intercept before visiting the page. Once the page is loaded, the application fetches the todo items, and everything is working as expected.

you can see this link: https://glebbahmutov.com/blog/cypress-intercept-problems/

Solved. Problem was that i used

cy.request({
    method: 'POST',
    url: 'http://localhost:1337/auth/local',
    auth: {
      identifier: 'myUsername',
      password: 'myPassword',
    },
  })

but that's wrong, because I'm not putting user and password in the body of the request. I need to use this:

cy.request({
    method: 'POST',
    url: 'http://localhost:1337/auth/local',
    body: {
      identifier: 'myUsername',
      password: 'myPassword',
    },
  })

So the full function in commands.js is

import 'cypress-localstorage-commands'
let user

    Cypress.Commands.add('postToken', () => {
      cy.request({
        method: 'POST',
        url: 'http://localhost:1337/auth/local',
        body: {
          identifier: 'myUsername',
          password: 'myPassword',
        },
      })
        .its('body')
        .then(res => {
          console.log(res)
          user = res.user
          cy.setLocalStorage('identity_token', res.jwt)
        })
    })

and its use is:

before(() => {
    cy.postToken()
    cy.saveLocalStorage()
  })

  beforeEach(() => {
    cy.restoreLocalStorage()
  })

  after(() => {
    // quit and close browser
  })

  describe('Authentication', () => {
    it.only('should login', () => {
      cy.getLocalStorage('identity_token').should('exist')
      cy.getLocalStorage('identity_token').then(token => {
        console.log('Identity token', token)
      })

      cy.visit(siteUrl)

    })

  })

The mobile setting seem to be more like tablet size settings.

You can control the viewport before visiting

it('opens van gogh', () => {
  cy.viewport(1800,1000)
  cy.visit('https://www.vangoghmuseum.nl/nl');    // large screen layout
});

If you open devtools to the right and resize, you will see the breakpoint is around 1025 px wide.

Cypress viewport defaults to 1000 px, so you get the small-screen layout.

If you look at one of the <article> elements, it has breakpoint styling of

@media only screen and (min-width: 64em)

which equates to 1024px for the default pixel size of 16px.

If you're stubbing a response You have to write like this:

cy.intercept('GET', '**/tags', { fixture: 'tags.json' })

You nodemailer file needs adjusting a bit. The is no export which is why the message sendAnEmail is not a function

const nodemailer = require('nodemailer');
const sgTransport = require('nodemailer-sendgrid-transport');

export function sendAnEmail(message)
    
  const options = {
    ...
  }
  const client = nodemailer.createTransport(sgTransport(options));
  
  const email = {
    ...
  };

  client.sendMail(email, function(err, info) {
    return err? err.message : 'Message sent: ' + info.response;
  });
}

Also, in cypress.config.js import it with a relative path

const { defineConfig } = require("cypress");
const sendAnEmail = require("./nodemailer")

and to be a clean-coder, us a different name from the npm package (something like

const sendAnEmail = require("./send-an-email")