CODEWITHSUNDEEP
javascriptnode.jsjestjsbackendpuppeteer
Aadarsh velu
Aadarsh velu

Reputation: 160

How To Get The URL After Redirecting from Current Page To Another Using Puppeteer?

I'm Aadarshvelu! Recently Started Testing My WebApp Code Using Jest With Puppeteer. So I Have Page Which All Credentials Have Been Filled With Puppeteer.But When SummitButton('signBtn') Clicked POST process Starts

Is There Any Test That Process POST Request?..

Or

How Do I Know Test Has Been Completely Finished?

Or

How to Get The Redirect Page URL While Test Running?

This Is My Code!

const puppeteer = require('puppeteer');
const timeOut = 100 * 1000;

test("Full E2E Test!" , async () => {

    const browser = await puppeteer.launch({
        headless: false,
        slowMo:30,
        args: ['--window-size=1920,1080']
    });

    const page = await browser.newPage();

    await page.goto('https://mypass-webapp.herokuapp.com/signUp');

    await page.click('input#email');
    await page.type('input#email', '[email protected]');
    await page.click('input#username');
    await page.type('input#username' , "puppeteer");
    await page.click('input#password');
    await page.type('input#password' , "puppeteer");
    await page.click('#signBtn').then(await console.log(page.url()));

    // Here I Need a Test That Checks The Current Page!

    await browser.close();

} , timeOut);

Upvotes: 10

Views: 24203

Answers (3)

HeyEdd
HeyEdd

Reputation: 1134

After the await page.goto(..), simply do a page.url(). It will give you the final url after any redirects have taken place.

Here is my reference: https://github.com/puppeteer/puppeteer/issues/2215#issuecomment-455695684

It worked for me.

The HTTPRequest.redirectChain() way (which was one of the answer reply of this question) of trying to get the final redirected url did not work. Weirdly, it showed 307 with the same original http url, when infact a 302 was happening and it redirected to the https url

Upvotes: 0

raousama391
raousama391

Reputation: 21

await page.click('#signBtn')

After this simply make another page

const [, page2] = await browser.pages();

And here is your redirect Page Url 👇

  const redirectPageUrl  = page2.url();
  console.log(redirectPageUrl);

Upvotes: 0

Edi Imanto
Edi Imanto

Reputation: 2499

  1. Is There Any Test That Process POST Request?..
const [response] = await Promise.all([
  page.click('input[type="submit"]'), // After clicking the submit
  page.waitForNavigation() // This will set the promise to wait for navigation events
// Then the page will be send POST and navigate to target page
]);
// The promise resolved
  1. How Do I Know Test Has Been Completely Finished?
const [response] = await Promise.all([
  page.click('a.my-link'), // Clicking the link will indirectly cause a navigation
  page.waitForNavigation('networkidle2') // The promise resolves after navigation has finished after no more than 2 request left
]);
// The promise resolved
  1. How to Get The Redirect Page URL While Test Running?

For example, if the website http://example.com has a single redirect to https://example.com, then the chain will contain one request:

const response = await page.goto('http://example.com');
const chain = response.request().redirectChain();
console.log(chain.length); // Return 1
console.log(chain[0].url()); // Return string 'http://example.com'

If the website https://google.com has no redirects, then the chain will be empty:

const response = await page.goto('https://google.com');
const chain = response.request().redirectChain();
console.log(chain.length); // Return 0

Upvotes: 17

Related Questions