如何用Playwright最大化浏览器窗口？（Cucumber代码问题）

问题描述 #

运行以下hooks.cjs代码后，浏览器并未进入全屏最大化模式，使用命令npm run test -- --tags "@Begin"执行测试，尝试多种方法均无效：

const playwright = require('playwright');
const { BeforeAll, Before, After, AfterAll , Status } = require('@cucumber/cucumber');

// Launch options.
const options = {
    slowMo: 100,
    ignoreHTTPSErrors: true,
};

// Create a global browser for the test session.
BeforeAll(async () => {
    console.log('Launch Browser');
    global.browser = await playwright['chromium'].launch({ headless: false,
        args:['--window-size=1920,1040']}); // --start-maximized //defaultViewport: null
    //global.context = await playwright['chromium'].launch({ args: ['--start-maximized'] });
})

// Create a new browser context for each test.
Before(async () => {
    console.log('Create a new Context and Page')
    global.context = await global.browser.newContext()
    global.page = await global.context.newPage()
})

// Close the page and context after each test.
After(async () => {
    console.log('Close Context and Page');
    await global.page.close();
    await global.context.close();
})

// Take Screenshot if Scenario Fails
After(async function (scenario) {
    if (scenario.result.status === Status.FAILED) {
        const buffer = await global.page.screenshot({ path: `reports/${scenario.pickle.name}.png`, fullPage: true })
        this.attach(buffer, 'image/png');
    }
})

// Close Browser
AfterAll(async () => {
    console.log('close Browser')
    await global.browser.close()
});

解决方法 #

问题核心是浏览器启动参数被上下文的默认视口配置覆盖，Playwright中newContext()默认会设置固定视口，导致launch()里的窗口尺寸参数失效，以下是两种可行修复方案：

方案一：实现原生全屏最大化 #

修改BeforeAll和Before钩子的代码，同时配置浏览器启动参数和上下文视口：

BeforeAll(async () => {
    console.log('Launch Browser');
    // 启动浏览器时指定最大化参数
    global.browser = await playwright['chromium'].launch({ 
        headless: false,
        args: ['--start-maximized']
    });
})

Before(async () => {
    console.log('Create a new Context and Page')
    // 设置viewport为null，禁用固定视口，保留浏览器原生窗口尺寸
    global.context = await global.browser.newContext({
        viewport: null
    })
    global.page = await global.context.newPage()
})

• --start-maximized让浏览器启动时直接最大化
• viewport: null告诉Playwright不要强制设置固定视口，保持浏览器的原生窗口状态

方案二：设置固定分辨率窗口 #

如果不需要原生最大化，而是需要固定尺寸的窗口（比如1920x1080），可以直接在创建上下文时配置视口，无需修改launch()参数：

Before(async () => {
    console.log('Create a new Context and Page')
    global.context = await global.browser.newContext({
        viewport: { width: 1920, height: 1080 }
    })
    global.page = await global.context.newPage()
})

注意事项 #

• 避免同时在launch()中设置--window-size和使用newContext()的默认视口，后者会覆盖前者的设置
• 确保Playwright版本为最新，旧版本可能存在参数兼容问题，可执行npm update playwright更新

内容的提问来源于stack exchange，提问作者nosequeweaponer