Tips for continuously running a loop function until retrieving a value from an API within a cypress project

Need help looping a function to retrieve the value from an API in my Cypress project. The goal is to call the API multiple times until we receive the desired value.

let otpValue = '';
const loopFunc = () => {
    cy.request({
      method: 'GET',
      url: 'http://tesurl/api/otp/getotp',
    }).then((res) => {
      expect(res.status).to.equal(200);
      res.body.OTPCode !== null ? (otpValue = res.body.OTPCode) : loopFunc();
      
    });
  };
cy.get('otpinput').type(otpValue)

However, I'm encountering issues with the loop function not functioning as expected. I anticipate that the loop will continue running until we retrieve a non-null value for 'OTPCode'.

Thank you in advance for any assistance.

javascripttypescriptecmascript-6cypress

Answer №1

When working with asynchronous operations in Cypress, it is crucial to handle requests carefully. You can leverage Cypress' retry mechanism along with a custom assertion to ensure that the API response includes a non-null OTP code without resorting to a recursive loop. Below is an illustration of how this can be accomplished:

let otpValue = '';

const getOtp = () => {
  return cy.request({
    method: 'GET',
    url: 'http://testurl/api/otp/getotp',
  });
};

const waitUntilOtpNotNull = () => {
  return getOtp().then((res) => {
    expect(res.status).to.equal(200);

    if (res.body.OTPCode !== null) {
      otpValue = res.body.OTPCode;
    } else {
      // Keep retrying until OTPCode is not null
      cy.wait(1000); // Adjust the wait time as necessary
      waitUntilOtpNotNull();
    }
  });
};

// Implementation
waitUntilOtpNotNull().then(() => {
  // Input the obtained OTP into the designated field
  cy.get('otpinput').type(otpValue);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement a loop using JQuery?

<script> $(function() { $('.slideshow').each(function(index, element) { $(element).crossSlide({ sleep: 2, fade: 1 }, [ { src: 'picture' + (index + 1) + '.jpg' } ]); }); ...

javascriptjqueryhtmlcssloops

Adjust the viewport width based on the width of the device

Having difficulty adjusting the meta tag viewport content width based on device width, I am struggling to achieve my desired outcome. Here is the code snippet I have been working with: Code snippet: <meta id="viewport" name="viewport" content="width=d ...

javascripthtmlioscssviewport

Is it possible in RxJS to configure a ReplaySubject (or equivalent) that replays the latest messages with a distinctive identifier?

Is it possible to create a generic code that behaves like a ReplaySubject but emits each most recent message with a unique name upon subscribing? In the script below, the current output is... I want this to be logged once ... received the latest bbb 5 I c ...

javascriptangularrxjs

The placeholder feature seems to be malfunctioning when it comes to entering phone numbers in a react

I am working on a MUI phone number form field. I want the placeholder to show up initially, but disappear when the user starts typing. How can I achieve this functionality in my code? import React from "react"; import MuiPhoneNumber from " ...

javascriptreactjsmaterial-ui

A guide to adding a picture to AWS S3 with the help of GraphQL

When trying to upload a base64 string via GraphQL, I encountered an issue. It seems that if the string exceeds 50,000 characters, GraphQL fails to reach the resolve function without giving any error messages. However, when the string is less than 50,000 ...

javascriptreactjsamazon-s3graphqlaws-appsync

Turn a textfield on and off in real-time

Hey everyone, I've been working on making a textfield dynamic and I wanted to share my code with you: <input type="text" id="test1" value ="dynamic" onfocus="this.disabled=true" onblur="this.disabled=false"> <input type="text" id="test2 ...

javascriptjqueryhtmlcssonfocus

What are the steps for utilizing the useReducer Hook with TypeScript?

I have successfully converted a React app to Typescript, but I am facing an issue with the useReducer Hook. The error message I'm getting is preventing me from moving forward. I have attempted different approaches to passing TypeScript interfaces in ...

reactjstypescript

What repercussions come from failing to implement an event handler for 'data' events in post requests?

If you take a look at the response provided by Casey Chu (posted on Nov30'10) in this particular question: How do you extract POST data in Node.js? You'll find that he is handling 'data' events to assemble the request body. The code sn ...

javascriptnode.js

Activate the bootstrap modal display using PHP code

Can someone help me trigger the modal('show') event using PHP code? I attempted the following: if(isset($_POST['Edit'])){ echo "<script> $('#Modal').modal('show') </script>"; } I tested this code, but i ...

phpjavascriptjquerytwitter-bootstrap

Can you tell me the title of this pointer?

When utilizing the drag function in the RC-tree, a specific cursor is displayed. I am interested in using this cursor in another dragzone on my website, but I am uncertain of its name. This same cursor also appears when dragging highlighted text into the b ...

javascriptreactjscursor

Using Node.js to implement GET, POST, and DELETE functionalities

I have embarked on the journey of learning Node.js and I find myself in a state of confusion. Could you please guide me on how to construct effective HTTP requests for the following scenarios: 1) Retrieve all galleries from the gallerySchema using a GET ...

javascriptnode.jsapiexpresshttp

Stop JavaScript Injection Attacks

Let's consider a scenario where a user inputs information into a form that is then submitted to the server using PHP. In the PHP code, we have: $data = $_POST['data']; // or $data = strip_tags(@$_POST['data']); I am curious t ...

javascriptphpjquerymysqlcode-injection

Nextjs compilation error - Unable to locate module: Cannot resolve 'module'

Currently, I am immersed in a nextjs project using wagmi hooks. Recently, Nextjs presented me with an error message indicating that it cannot resolve the 'module' (refer to the error message below). This occurred after resolving the initial error ...

javascriptnext.jsnode-modules

Utilize jQuery in phantom.js to send an ajax request across domains

I am currently in the process of testing a chrome plugin by emulating a portion of its functionality on phantomjs. My objective for phantom seems quite straightforward, yet I am encountering issues. I aim for it to navigate to a specific webpage and withi ...

javascriptphantomjs

Tips for customizing the WooCommerce product page

If you want to customize the layout of a WooCommerce product page, you can override the template by copying the WooCommerce template folder into your theme. You can find step-by-step instructions here. I am looking to change the layout of a WooCommerce pr ...

javascriptphpcsswordpresswoocommerce

Problem integrating multer with Express JS and Node JS

Click here to access the server.js file on GitHub Following a tutorial, I have implemented code accordingly. However, when working with an updated version of Express JS, errors are being thrown on the side of Express JS. Error C:\nodefiles&bso ...

javascriptnode.jsexpress

What mistakes am I making in including/injecting functions in AngularJS controllers and factories?

I'm encountering an issue in Angular where I am struggling to inject my factory into my controller. The error message I'm receiving is "Cannot read property 'validar' of undefined". In my project, I have two files - ServiceUtil.js which ...

javascriptangularjsdependency-injectionangularjs-scopeangularjs-service

Error: The function stripHtml cannot be found

Currently, I am developing a blog website using Next Js. I encountered an issue while creating a rich text-editor API for the blog. When attempting to utilize string-strip-html, an error message was displayed as follows: C:\Users\alami\OneDr ...

javascriptnode.jsreactjsnext.js

"Troubleshooting a problem with ReactJS functional component props within the useEffect hook in

In my code, I am utilizing a functional component as a child and passing props from the parent. Within these props is an array called value, which initially starts off empty([]) when accessed inside the useEffect hook. However, after some time, this arra ...

reactjsecmascript-6react-hooks

Converting an HTMLElement to a Node in Typescript

Is there a method to transform an HTMLElement into a Node element? As indicated in this response (), an Element is one specific type of node... However, I am unable to locate a process for conversion. I specifically require a Node element in order to inp ...

javascripttypescripthtmlelements