How to deal with Browser Options with puppeteer

How to perform browser options like launch and close browser using puppeteer. During web automation, We have to deal with multiple browser options. Let’s see some important browsers operation that we can handle easily with the puppeteer.

Browser Options with puppeteer

  • Launch the browser and open a new tab.
  • Close the browser or quit the browser.
  • Launch browser in headless mode.
  • Pausing the test case execution.
  • Reload the browser.
  • Go back and forward in the browser.

These are browser options that we are going to cover in the puppeteer tutorial. Let’s see one by one with examples.

How to Launch browser using puppeteer.

launch() function is used to launch the browser. by default launch() will open the browser in headless mode. To make the headless off. puppeteer have option launch({headless:false}). below is the example to launch the browser without headless and close the browser.

const puppeteer = require('puppeteer')

describe("Home Page TestSuite",()=>{
     it("Home landing page",async()=>{
    const browser = await puppeteer.launch({headless:false})
    const page = await browser.newPage()
    await page.close();
  });
 });

How to close browser using puppeteer

close() is used to close the browser.

await page.close();

How to set headless mode false in puppeteer

As I said by default browser will run in the headless mode. but we have an easy option to set headless mode as false. Pass a parameter in launch() function {headless:false}.

const browser = await puppeteer.launch({headless:false})

How to slow down the test execution in puppeteer

Its really awesome thing in puppeteer. We can slow down the execution. Yes! true puppeteer has slwoMo option. Pass another parameter in the launch() as slowMo:10 the execution delay 10 sec in every step of execution.

const puppeteer = require('puppeteer')

describe("Home Page TestSuite",()=>{
     it("Home landing page",async()=>{
    const browser = await puppeteer.launch({
      headless:false,
      slowMo:10
    })
    const page = await browser.newPage()
    await page.goto("http://automationpractice.com/index.php");
    await page.close();
  });

    });

How to reload a web page using puppeteer

reload() is used to reload the same page in puppeteer.

await page.reload();

Go back and forward in the browser using puppeteer

goBack() and goForward() is used to perform Back and forward in the browser with the puppeteer.

await page.goBack();
await page.goForward();

Let’s see an example that contains all the browser option

const puppeteer = require('puppeteer')

describe("Home Page TestSuite",()=>{
     it("Home landing page",async()=>{
    const browser = await puppeteer.launch({
      headless:false,
      slowMo:10
    })
    const page = await browser.newPage()
    await page.goto("https://devexpress.github.io/testcafe/example/");
    await page.reload();
    await page.goBack();
    await page.goForward();
    await page.close();
  });

    });

Output:

Incognito mode in puppeteer

We can run automation test script in incognito mode in puppeteer. Let’s see an example to launch an incognito mode of chrome browser using puppeteer.

Create an incognito context in puppeteer

const context = await browser.createIncognitoBrowserContext();

Puppeteer example to run the script in Incognito mode

const puppeteer = require('puppeteer')

describe("Home Page TestSuite",()=>{
     it("Home landing page",async()=>{
    const browser = await puppeteer.launch({
      headless:false,
      slowMo:10
    })
    //Create a Inconginto text context
    const context = await browser.createIncognitoBrowserContext();
    const page = await context.newPage()
    await page.goto("https://devexpress.github.io/testcafe/example/");
    await page.reload();
    await page.goBack();
    await page.goForward();
    await context.close();
  });

    });

How to maximize browser in puppeteer

const browser = await puppeteer.launch({headless:false,
       defaultViewport: null,
       args: ['--start-maximized'] 
   
   })