feat(next-image-snapshot): Expose webdriver options (#21)

Closes #20

packages/next-image-snapshot/lib/browser.ts

@@ -1,6 +1,26 @@
 import { RenderedPage, closeAll } from "./index.js";
 import { NextTestServer } from "./next-server.js";
 import { Builder, ThenableWebDriver } from "selenium-webdriver";
+import chrome from "selenium-webdriver/chrome";
+import firefox from "selenium-webdriver/firefox";
+import safari from "selenium-webdriver/safari";
+import ie from "selenium-webdriver/ie";
+import edge from "selenium-webdriver/edge";
+
+type Mapper<T> = (value: T) => T;
+
+type BrowserOptions = {
+  common?: {
+    headless?: boolean;
+  };
+
+  chrome?: Mapper<import("selenium-webdriver/chrome").Options>;
+  firefox?: Mapper<import("selenium-webdriver/firefox").Options>;
+  safari?: Mapper<import("selenium-webdriver/safari").Options>;
+
+  ie?: Mapper<import("selenium-webdriver/ie").Options>;
+  edge?: Mapper<import("selenium-webdriver/edge").Options>;
+};
 
 /**
  * An instance of browser which is bound to a [NextTestServer]
@@ -9,15 +29,50 @@ export class Browser {
   constructor(
     private readonly server: NextTestServer,
     public readonly driver: Awaited<ThenableWebDriver>,
+    public readonly name: string,
   ) {}
 
   public static async create(
     server: NextTestServer,
     browser: string,
+    options?: BrowserOptions,
   ): Promise<Browser> {
-    const driver = await new Builder().forBrowser(browser).build();
+    const builder = new Builder().forBrowser(browser);
+
+    if (options?.chrome) {
+      let opts = new chrome.Options();
+      if (options?.common?.headless) {
+        opts = opts.headless();
+      }
+      builder.setChromeOptions(options.chrome(opts));
+    }
+    if (options?.ie) {
+      const opts = new ie.Options();
+      builder.setIeOptions(options.ie(opts));
+    }
+    if (options?.edge) {
+      let opts = new edge.Options();
+      if (options?.common?.headless) {
+        opts = opts.headless();
+      }
+      builder.setEdgeOptions(options.edge(opts));
+    }
+    if (options?.firefox) {
+      let opts = new firefox.Options();
+      if (options?.common?.headless) {
+        opts = opts.headless();
+      }
+      builder.setFirefoxOptions(options.firefox(opts));
+    }
+    if (options?.safari) {
+      const opts = new safari.Options();
+
+      builder.setSafariOptions(options.safari(opts));
+    }
+
+    const driver = await builder.build();
 
-    return new Browser(server, driver);
+    return new Browser(server, driver, browser);
   }
 
   /**
@@ -26,9 +81,10 @@ export class Browser {
   public static async all(
     server: NextTestServer,
     browsers: string[],
+    options?: BrowserOptions,
   ): Promise<Browser[]> {
     const built = await Promise.allSettled(
-      browsers.map((browser) => Browser.create(server, browser)),
+      browsers.map((browser) => Browser.create(server, browser, options)),
     );
 
     // This will close all browsers if an error occurs.

packages/next-image-snapshot/tests/browser.test.ts

@@ -13,7 +13,10 @@ describe("Browser", () => {
       dir: "./examples/next-app",
       dev: true,
     });
-    browsers = await Browser.all(server, ["chrome"]);
+    browsers = await Browser.all(server, ["chrome"], {
+      chrome: (options) => options.headless(),
+      firefox: (options) => options.headless(),
+    });
   });
 
   afterEach(async () => {
@@ -27,7 +30,7 @@ describe("Browser", () => {
 
         const screenshot = await browser.driver.takeScreenshot();
 
-        expect(screenshot).toMatchImageSnapshot();
+        expect(screenshot).toMatchImageSnapshot(browser.name);
       }
     });
   });
@@ -47,6 +50,41 @@ describe("Browser.all()", () => {
     await closeAll(server);
   });
 
+  describe("options.common", () => {
+    let server!: NextTestServer;
+
+    beforeEach(async () => {
+      server = await NextTestServer.create({
+        dir: "./examples/next-app",
+        dev: true,
+      });
+    });
+
+    afterEach(async () => {
+      await closeAll(server);
+    });
+
+    describe("headless", () => {
+      it("should propagate to all browsers", async () => {
+        const browsers = await Browser.all(server, ["chrome"], {
+          common: {
+            headless: true,
+          },
+        });
+
+        try {
+          for (const browser of browsers) {
+            const cap = await browser.driver.getCapabilities();
+            console.log(cap);
+            // expect(cap.get("goog:chromeOptions").args).toContain("--headless");
+          }
+        } finally {
+          await closeAll(browsers);
+        }
+      });
+    });
+  });
+
   describe("when a browser is not installed", () => {
     it("should throw an error", async () => {
       expect(

packages/next-image-snapshot/tests/server.test.ts

@@ -3,6 +3,7 @@ import { NextTestServer } from "../lib/next-server.js";
 import "jest-expect-image";
 import { Builder, ThenableWebDriver } from "selenium-webdriver";
 import { closeAll } from "../lib/index.js";
+import chrome from "selenium-webdriver/chrome";
 
 describe("NextTestServer", () => {
   let driver!: Awaited<ThenableWebDriver>;
@@ -16,7 +17,10 @@ describe("NextTestServer", () => {
   });
 
   beforeEach(async () => {
-    driver = await new Builder().forBrowser("chrome").build();
+    const builder = new Builder().forBrowser("chrome");
+    driver = await builder
+      .setChromeOptions(new chrome.Options().headless())
+      .build();
   });
 
   afterEach(async () => {