fix(config): fall back to context options (#15309)

packages/playwright-test/src/index.ts

@@ -136,31 +136,31 @@ export const test = _baseTest.extend<TestFixtures, WorkerFixtures>({
     await browser.close();
   }, { scope: 'worker', timeout: 0 } ],
 
-  acceptDownloads: [ true, { option: true } ],
-  bypassCSP: [ undefined, { option: true } ],
-  colorScheme: [ undefined, { option: true } ],
-  deviceScaleFactor: [ undefined, { option: true } ],
-  extraHTTPHeaders: [ undefined, { option: true } ],
-  geolocation: [ undefined, { option: true } ],
-  hasTouch: [ undefined, { option: true } ],
-  httpCredentials: [ undefined, { option: true } ],
-  ignoreHTTPSErrors: [ undefined, { option: true } ],
-  isMobile: [ undefined, { option: true } ],
-  javaScriptEnabled: [ true, { option: true } ],
-  locale: [ 'en-US', { option: true } ],
-  offline: [ undefined, { option: true } ],
-  permissions: [ undefined, { option: true } ],
-  proxy: [ undefined, { option: true } ],
-  storageState: [ undefined, { option: true } ],
-  timezoneId: [ undefined, { option: true } ],
-  userAgent: [ undefined, { option: true } ],
-  viewport: [ { width: 1280, height: 720 }, { option: true } ],
+  acceptDownloads: [ ({ contextOptions }, use) => use(contextOptions.acceptDownloads ?? true), { option: true } ],
+  bypassCSP: [ ({ contextOptions }, use) => use(contextOptions.bypassCSP), { option: true } ],
+  colorScheme: [ ({ contextOptions }, use) => use(contextOptions.colorScheme), { option: true } ],
+  deviceScaleFactor: [ ({ contextOptions }, use) => use(contextOptions.deviceScaleFactor), { option: true } ],
+  extraHTTPHeaders: [ ({ contextOptions }, use) => use(contextOptions.extraHTTPHeaders), { option: true } ],
+  geolocation: [ ({ contextOptions }, use) => use(contextOptions.geolocation), { option: true } ],
+  hasTouch: [ ({ contextOptions }, use) => use(contextOptions.hasTouch), { option: true } ],
+  httpCredentials: [ ({ contextOptions }, use) => use(contextOptions.httpCredentials), { option: true } ],
+  ignoreHTTPSErrors: [ ({ contextOptions }, use) => use(contextOptions.ignoreHTTPSErrors), { option: true } ],
+  isMobile: [ ({ contextOptions }, use) => use(contextOptions.isMobile), { option: true } ],
+  javaScriptEnabled: [ ({ contextOptions }, use) => use(contextOptions.javaScriptEnabled ?? true), { option: true } ],
+  locale: [ ({ contextOptions }, use) => use(contextOptions.locale ?? 'en-US'), { option: true } ],
+  offline: [ ({ contextOptions }, use) => use(contextOptions.offline), { option: true } ],
+  permissions: [ ({ contextOptions }, use) => use(contextOptions.permissions), { option: true } ],
+  proxy: [ ({ contextOptions }, use) => use(contextOptions.proxy), { option: true } ],
+  storageState: [ ({ contextOptions }, use) => use(contextOptions.storageState), { option: true } ],
+  timezoneId: [ ({ contextOptions }, use) => use(contextOptions.timezoneId), { option: true } ],
+  userAgent: [ ({ contextOptions }, use) => use(contextOptions.userAgent), { option: true } ],
+  viewport: [({ contextOptions }, use) => use(contextOptions.viewport === undefined ? { width: 1280, height: 720 } : contextOptions.viewport), { option: true }],
   actionTimeout: [ 0, { option: true } ],
   navigationTimeout: [ 0, { option: true } ],
   baseURL: [ async ({ }, use) => {
     await use(process.env.PLAYWRIGHT_TEST_BASE_URL);
   }, { option: true } ],
-  serviceWorkers: [ 'allow', { option: true } ],
+  serviceWorkers: [ ({ contextOptions }, use) => use(contextOptions.serviceWorkers ?? 'allow'), { option: true } ],
   contextOptions: [ {}, { option: true } ],
 
   _combinedContextOptions: async ({

tests/playwright-test/playwright.config.spec.ts

@@ -67,3 +67,120 @@ test('should override launchOptions', async ({ runInlineTest }) => {
   expect(result.exitCode).toBe(0);
   expect(result.passed).toBe(1);
 });
+
+test('should respect contextOptions', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': `
+      module.exports = {
+        use: {
+          contextOptions: {
+            acceptDownloads: false,
+            bypassCSP: true,
+            colorScheme: 'dark',
+            deviceScaleFactor: 2,
+            extraHTTPHeaders: {'foo': 'bar'},
+            hasTouch: true,
+            ignoreHTTPSErrors: true,
+            isMobile: true,
+            javaScriptEnabled: true,
+            locale: 'fr-FR',
+            offline: true,
+            permissions: ['geolocation'],
+            timezoneId: 'TIMEZONE',
+            userAgent: 'UA',
+            viewport: null
+          }
+        }
+      };
+    `,
+    'a.test.ts': `
+      const { test } = pwt;
+      test('pass', async ({ acceptDownloads, bypassCSP, colorScheme, deviceScaleFactor, extraHTTPHeaders, hasTouch, ignoreHTTPSErrors, isMobile, javaScriptEnabled, locale, offline, permissions, timezoneId, userAgent, viewport }) => {
+        expect.soft(acceptDownloads).toBe(false);
+        expect.soft(bypassCSP).toBe(true);
+        expect.soft(colorScheme).toBe('dark');
+        expect.soft(deviceScaleFactor).toBe(2);
+        expect.soft(extraHTTPHeaders).toEqual({'foo': 'bar'});
+        expect.soft(hasTouch).toBe(true);
+        expect.soft(ignoreHTTPSErrors).toBe(true);
+        expect.soft(isMobile).toBe(true);
+        expect.soft(javaScriptEnabled).toBe(true);
+        expect.soft(locale).toBe('fr-FR');
+        expect.soft(offline).toBe(true);
+        expect.soft(permissions).toEqual(['geolocation']);
+        expect.soft(timezoneId).toBe('TIMEZONE');
+        expect.soft(userAgent).toBe('UA');
+        expect.soft(viewport).toBe(null);
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
+
+test('should override contextOptions', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': `
+      module.exports = {
+        use: {
+        acceptDownloads: false,
+        bypassCSP: true,
+        colorScheme: 'dark',
+        deviceScaleFactor: 2,
+        extraHTTPHeaders: {'foo': 'bar'},
+        hasTouch: true,
+        ignoreHTTPSErrors: true,
+        isMobile: true,
+        javaScriptEnabled: true,
+        locale: 'fr-FR',
+        offline: true,
+        permissions: ['geolocation'],
+        timezoneId: 'TIMEZONE',
+        userAgent: 'UA',
+        viewport: null,
+        contextOptions: {
+            acceptDownloads: true,
+            bypassCSP: false,
+            colorScheme: 'light',
+            deviceScaleFactor: 1,
+            extraHTTPHeaders: {'foo': 'bar2'},
+            hasTouch: false,
+            ignoreHTTPSErrors: false,
+            isMobile: false,
+            javaScriptEnabled: false,
+            locale: 'en-US',
+            offline: false,
+            permissions: [],
+            timezoneId: 'TIMEZONE 2',
+            userAgent: 'UA 2',
+            viewport: { width: 500, height: 500 }
+          }
+        }
+      };
+    `,
+    'a.test.ts': `
+      const { test } = pwt;
+      test('pass', async ({ acceptDownloads, bypassCSP, colorScheme, deviceScaleFactor, extraHTTPHeaders, hasTouch, ignoreHTTPSErrors, isMobile, javaScriptEnabled, locale, offline, permissions, timezoneId, userAgent, viewport }) => {
+        expect.soft(acceptDownloads).toBe(false);
+        expect.soft(bypassCSP).toBe(true);
+        expect.soft(colorScheme).toBe('dark');
+        expect.soft(deviceScaleFactor).toBe(2);
+        expect.soft(extraHTTPHeaders).toEqual({'foo': 'bar'});
+        expect.soft(hasTouch).toBe(true);
+        expect.soft(ignoreHTTPSErrors).toBe(true);
+        expect.soft(isMobile).toBe(true);
+        expect.soft(javaScriptEnabled).toBe(true);
+        expect.soft(locale).toBe('fr-FR');
+        expect.soft(offline).toBe(true);
+        expect.soft(permissions).toEqual(['geolocation']);
+        expect.soft(timezoneId).toBe('TIMEZONE');
+        expect.soft(userAgent).toBe('UA');
+        expect.soft(viewport).toBe(null);
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});