CYPRESS- error during type a value from API request to input

Question

When I try to type OTP code (I get it from API), cypress shows an error cypress screenshot

 cy.get('input[data-placeholder="OTP"]').type(getOtpCode(phoneNumber))

function getOtpCode(phone) {
  var otpCode;
  cy.request({
    method: 'GET',
    url: 'url'
  }).then(resp => resp.body)
    .then(data => data.find(element => element['body']['Message']['Phone'] == phone))
    .then(phone => otpCode = phone['body']['Message']['CustomMessage']);
  return otpCode;
}

If i typed a random string instead getOtpCode() it's working. Do you know how to resolve that problem? Thanks for any help :)

Alapan Das · Accepted Answer · 2022-07-11T09:53:56.613

1

For the function do this:

cy.get('input[data-placeholder="OTP"]')
  .should('be.visible')
  .type(getOtpCode(phoneNumber))

function getOtpCode(phone) {
  var otpCode
  cy.request({
    method: 'GET',
    url: 'url',
  })
    .then((resp) => resp.body)
    .then((data) =>
      data.find((element) => element['body']['Message']['Phone'] == phone)
    )
    .then((phone) => (otpCode = phone['body']['Message']['CustomMessage']))
  return cy.wrap(otpCode)
}

In your test file do this:

import className from '../path-to-js-file.js' //replace className with yours
const obj = new className() //replace className with yours

describe('Test Suite', () => {
  it('Test Case', () => {
    obj.getOtpCode(phone).then((otp) => {
      cy.get('input[data-placeholder="OTP"]').type(otp)
    })
  })
})

edited Jul 11 '22 at 09:53

answered Jul 11 '22 at 08:55

Alapan Das

17,144
3
29
52

Unfortunately, the problem persists. 'cy.type() failed because it requires a DOM element. The subject received was: > 817968 The previous command that ran was: > cy.then()' – Marcin Jul 11 '22 at 09:10
Can you add the code for `getOtpCode`. – Alapan Das Jul 11 '22 at 09:11
I added to my question :) – Marcin Jul 11 '22 at 09:26
Where is this function written, in a separate js file. – Alapan Das Jul 11 '22 at 09:33
yes, I export function from another js file :) – Marcin Jul 11 '22 at 09:35

Fody · Answer 2 · 2022-07-11T10:28:47.003

It looks like you need to perform getOtpCode() first, because of the async cy.request().

Also the function needs to return the cy.request() to allow .then() to be used after it.

function getOtpCode(phone) {
  return cy.request({
    method: 'GET',
    url: 'url'
  })
  .then(resp => resp.body)
  .then(data => data.find(element => element['body']['Message']['Phone'] == phone))
  .then(phone => phone['body']['Message']['CustomMessage']);
}

getOtpCode(phoneNumber).then(otpcode => {
  cy.get('input[data-placeholder="OTP"]').type(otpcode)
})

Alternately, change the function to a custom command. You will not need to return anything as Cypress sets the current subject to the result of the last .then() in the cy.request() chain.

The custom command can be defined globally.

cypress/support/commands.js

Cypress.Commands.add('getOtpCode', (phone) => {
  cy.request({
    method: 'GET',
    url: 'url'
  })
  .then(resp => resp.body)
  .then(data => data.find(element => element['body']['Message']['Phone'] == phone))
  .then(phone => phone['body']['Message']['CustomMessage']);
})

test

cy.getOtpCode(phoneNumber).then(otpcode => {
  cy.get('input[data-placeholder="OTP"]').type(otpcode)
})

CYPRESS- error during type a value from API request to input

2 Answers2