Puppeteer: resizeWindow() does not change window bounds

What are you trying to achieve?

I want to resize the browser window

What do you get instead?

I get a bigger viewport size, but the browser window size stays the same.

See also https://github.com/GoogleChrome/puppeteer/issues/1183

Details

• CodeceptJS version: 1.1.5
• NodeJS Version: 8.9.4
• Operating System: Windows
• Puppeteer (1.0.0)

I would recommend considering the following code for the resizeWindow function which seems to work well

async resizeWindow(width, height) {
    await this.page.setViewport({height, width});

    // Window frame - probably OS and WM dependent.
    height += 85;
    
    // Any tab.
    const {targetInfos: [{targetId}]} = await this.browser._connection.send(
      'Target.getTargets'
    );
    
    // Tab window. 
    const {windowId} = await this.browser._connection.send(
      'Browser.getWindowForTarget',
      {targetId}
    );
    
    // Resize.
    await this.browser._connection.send('Browser.setWindowBounds', {
      bounds: {height, width},
      windowId
    });    
  }

[dvdvdmt]

Here is a slightly improved version of @hubidu’s snippet:

  async resizeWindow(width: number, height: number) {
    const page = await this.getActiveTab();
    const session = await page.target().createCDPSession();
    await page.setViewport({height, width});
    const {windowId} = await session.send('Browser.getWindowForTarget');
    await session.send('Browser.setWindowBounds', {
      bounds: {height, width},
      windowId,
    });
  }

I removed usages of private properties and call to ‘Target.getTargets’, because ‘Browser.getWindowForTarget’ returns the window with active CDP session (docs).

[jan-swiecki]

Modified version for puppeteer with slight code update (it works with chrome app mode):

async function resizeWindow(browser, page, width, height) {
  await page.setViewport({height, width})

  // Window frame - probably OS and WM dependent.
  height += 85
  
  // Any tab.
  const targets = await browser._connection.send(
    'Target.getTargets'
  )

  // modified code
  const target = targets.targetInfos.filter(t => t.attached === true && t.type === 'page')[0]
  
  // Tab window. 
  const {windowId} = await browser._connection.send(
    'Browser.getWindowForTarget',
    {targetId: target.targetId}
  )
  const {bounds} = await browser._connection.send(
    'Browser.getWindowBounds',
    {windowId}
  )
  
  const resize = async () => {
    await browser._connection.send('Browser.setWindowBounds', {
      bounds: {width: width, height: height},
      windowId
    })
  }

  if(bounds.windowState === 'normal') {
    await resize()
  } else {
    await browser._connection.send('Browser.setWindowBounds', {
      bounds: {windowState: 'minimized'},
      windowId
    })
    await resize()
  }
}

const browser = await puppeteer.launch({
  executablePath: '/path/to/chrome',
  args: ['--app=http://localhost:8080'],
  headless: false,
  defaultViewport: null
})

const page = (await browser.pages())[0]

setTimeout(() => {
  console.log('resize')
  resizeWindow(browser, page, 800, 600)
}, 1000)