chore: Use chromium headless=new mode (#105)

src/browsers/capabilities.ts

@@ -56,7 +56,7 @@ const defaultCapabilities: Record<string, Capabilities> = {
         '--prerender-from-omnibox=disabled',
         '--no-sandbox',
         '--disable-gpu',
-        '--headless=old',
+        '--headless=new',
       ],
     },
   },

src/use-browser.ts

@@ -19,6 +19,15 @@ const options: BrowserOptions = {
   skipConsoleErrorsCheck: false,
 };
 
+// The errors like { "level": "SEVERE", "source": "network", "message": "http://localhost:8080/favicon.ico - Failed to load resource: the server responded with a status of 404 (Not Found)" }
+// originate in Chromium when using new headless mode. We ignore them as non-severe.
+function isFaviconError(error: Record<string, unknown>) {
+  const testMessages = ['favicon.ico - Failed to load resource', 'favicon.svg - Failed to load resource'];
+  const isNetworkError = 'source' in error && error.source === 'network';
+  const message = 'message' in error && typeof error.message === 'string' ? error.message : '';
+  return isNetworkError && testMessages.some(test => message.includes(test));
+}
+
 interface TestFunction {
   (browser: WebdriverIO.Browser): Promise<void> | void;
 }
@@ -32,6 +41,7 @@ function useBrowser(...args: [Partial<WebDriverOptions>, TestFunction] | [TestFu
   return async () => {
     const creator = getBrowserCreator(options.browserName, options.seleniumType, options.browserCreatorOptions);
     const browser = await creator.getBrowser({ ...options.webdriverOptions, ...optionsOverride });
+
     try {
       if ('getLogs' in browser) {
         // dispose logs from previous sessions, if there are any
@@ -41,7 +51,7 @@ function useBrowser(...args: [Partial<WebDriverOptions>, TestFunction] | [TestFu
       // This method does not exist in w3c protocol
       if (!options.skipConsoleErrorsCheck && 'getLogs' in browser) {
         const logs = (await browser.getLogs('browser')) as Array<{ level: string }>;
-        const errors = logs.filter(entry => entry.level === 'SEVERE');
+        const errors = logs.filter(entry => entry.level === 'SEVERE' && !isFaviconError(entry));
         if (errors.length > 0) {
           throw new Error('Unexpected errors in browser console:\n' + JSON.stringify(errors, null, 2));
         }

test/page-object.test.ts

@@ -94,12 +94,19 @@ test(
   })
 );
 
-test(
-  'setWindowSize',
+test.each([
+  { width: 400, height: 300 },
+  { width: 300, height: 400 },
+])('setWindowSize, width=$width, height=$height', size =>
   setupTest(async page => {
-    await page.setWindowSize({ width: 400, height: 300 });
-    expect(await page.getViewportSize()).toEqual(expect.objectContaining({ width: 400, height: 300 }));
-  })
+    await page.setWindowSize(size);
+    const { width, height } = await page.getViewportSize();
+    expect(width).toBe(size.width);
+
+    // With Chromium --headless=new the window.innerHeight differs from the defined window height.
+    expect(height).toBeGreaterThan(size.height - 100);
+    expect(height).toBeLessThanOrEqual(size.height);
+  })()
 );
 
 test(

test/use-browser.test.ts

@@ -18,13 +18,20 @@ test(
   })
 );
 
-test(
-  'should allow to override browser options',
-  useBrowser({ width: 600, height: 400 }, async browser => {
+test.each([
+  { width: 600, height: 400 },
+  { width: 400, height: 600 },
+  { width: 1900, height: 1200 },
+])('should allow to override browser options, width=$width, height=$height', size =>
+  useBrowser(size, async browser => {
     await browser.url('./index.html');
     const { width, height } = await browser.execute(getViewportSize);
-    expect({ width, height }).toEqual({ width: 600, height: 400 });
-  })
+    expect(width).toBe(size.width);
+
+    // With Chromium --headless=new the window.innerHeight differs from the defined window height.
+    expect(height).toBeGreaterThan(size.height - 100);
+    expect(height).toBeLessThanOrEqual(size.height);
+  })()
 );
 
 test('should close browser after test finish', async () => {