Code generated doesn't wait for the ajax call to finish

[vishalgwalani]

I have two pages in my application signin and password. When user enters email and clicks on NEXT button the API call is made. If the user exists then I am navigating to next page i.e password page. I integrated the code generated by extension in my app, but when an ajax call is made code doesn't wait for the ajax call to finish and looks for the element of next page i.e password page but as the ajax call is yet to finish it throws an error. I have attached the screenshot of error below.

code generated by the extension
describe('Test 1', () => { beforeAll(async () => { await page.goto('http://localhost:8000/sign-in'); }); it('Test 1 - 1', async () => { await page.click('#input_0'); await page.type('#input_0', 'okon.darrelo'); await page.keyboard.down('Shift'); await page.keyboard.press('_'); await page.keyboard.up('Shift'); await page.type('#input_0', 'd160i'); await page.keyboard.down('Shift'); await page.keyboard.press('@'); await page.keyboard.up('Shift'); await page.type('#input_0', 'anom.xyz'); await page.click('.form-signin > :nth-child(6)'); await page.click('.NEXT'); await page.click('#input_2'); await page.keyboard.press('CapsLock'); await page.type('#input_2', 'Newpassword1'); await page.click(':nth-child(4) > .NEXT'); }, 60000); });
error on console
image

.NEXT button is the element of page 1 and after that ajax call is made. #input_2 is the element of page 2