javascriptcypresscypress-custom-commands

How to use commands.js returned value in test.cy.js file


I am accessing my Gmail account by command loginByGoogleApi under commands.js, then getting the requested email body and pulling the required data from the body, and saving it in a const variable code >> now I want to .type the pulled email data (code) in my testFile.cy.js.

commands.js

/// <reference types="cypress" 
import { parseString } from "xml2js";
Cypress.Commands.add('loginByGoogleApi', () => {  
  cy.request({
    method: 'POST',
    url: 'https://www.googleapis.com/oauth2/v4/token',
    body: {
      grant_type: 'refresh_token',
      client_id:  Cypress.env('googleClientId'),
      client_secret:  Cypress.env('googleClientSecret'),
      refresh_token:  Cypress.env('googleRefreshToken'),
    },   
  }).then(({ body }) => {
    const { access_token, id_token } = body
    cy.log('Opening emails including code to verify')
    cy.request({
      method: 'GET',
      url: 'https://mail.google.com/mail/feed/atom/verifyCode',
      headers: { Authorization: Bearer ${access_token} },
    }).then(({ body }) => {
      parseString(body, function (err, results) {
        let data = JSON.stringify(results)
        let codeTitle = JSON.parse(data).feed.entry[0].title[0];
        let code = codeTitle.replace('Chaine confirmation code: ','');
        cy.log(code)
      });
    });   
  })
})

testFile.cy.js

const { Code } = require("@chaine/keychaine");


describe('Open login page', () => {   
  it('Enter your email to login', () => {
    cy.visit('https://chaineapp.com/staging/login%27)
    cy.get('#field-1').click().type('paras@loadtap.com');
    cy.get('[class*="chakra-button css-yg51i0"]').click();
    cy.get('#pin-input-2-0').type(<need to put code here>);
    })   
  it('get code', () => {
    cy.loginByGoogleApi()

  }) 
})

Solution

  • You can use cy.wrap(code), something like this:

    /// <reference types="cypress"
    import {parseString} from 'xml2js'
    Cypress.Commands.add('loginByGoogleApi', () => {
      cy.request({
        method: 'POST',
        url: 'https://www.googleapis.com/oauth2/v4/token',
        body: {
          grant_type: 'refresh_token',
          client_id: Cypress.env('googleClientId'),
          client_secret: Cypress.env('googleClientSecret'),
          refresh_token: Cypress.env('googleRefreshToken'),
        },
      }).then(({body}) => {
        const {access_token, id_token} = body
        cy.log('Opening emails including code to verify')
        cy.request({
          method: 'GET',
          url: 'https://mail.google.com/mail/feed/atom/verifyCode',
          headers: {Authorization: `Bearer ${access_token}`},
        }).then(({body}) => {
          parseString(body, function (err, results) {
            let data = JSON.stringify(results)
            let codeTitle = JSON.parse(data).feed.entry[0].title[0]
            let code = codeTitle.replace('Chaine confirmation code: ', '')
            return cy.wrap(code)
          })
        })
      })
    })
    

    In your test file, it will be like this:

    describe('Open login page', () => {
      it('Enter your email to login', () => {
        cy.visit('https://chaineapp.com/staging/login%27')
        cy.get('#field-1').click().type('paras@loadtap.com')
        cy.get('[class*="chakra-button css-yg51i0"]').click()
        cy.loginByGoogleApi().then((code) => {
          cy.get('#pin-input-2-0').type(code) //types code
        })
      })
    
      it('get code', () => {
        cy.loginByGoogleApi().then((code) => {
          cy.log(code) //logs code
        })
      })
    })
    

    You can also use the Cypress.env to globally save and get the value.

    To save you can write:

    Cypress.env('code', code)
    

    To get the value

    cy.get('#pin-input-2-0').type(Cypress.env('code'));