Allow snapshot strategy to be configured

This matches the `snapshotStrategy` option we recently added to
happo-cypress:

happo/happo-cypress#122

The clip strategy means the whole DOM is included in the snapshot, and
happo workers will clip the screenshot based on where the
`[data-happo-clip]` element is located. This data attribute is added by
happo-e2e when using the clip snapshot strategy:

happo/happo-e2e#54

index.js

@@ -35,7 +35,11 @@ module.exports = {
     await controller.finish();
   },
 
-  async screenshot(page, handleOrLocator, { component, variant, ...rest }) {
+  async screenshot(
+    page,
+    handleOrLocator,
+    { component, variant, snapshotStrategy = 'hoist', ...rest },
+  ) {
     if (!controller.isActive()) {
       return;
     }
@@ -57,11 +61,17 @@ module.exports = {
     const elementHandle = handleOrLocator.elementHandle
       ? await handleOrLocator.elementHandle()
       : handleOrLocator;
+
     const snapshot = await page.evaluate(
       (element) =>
-        window.happoTakeDOMSnapshot({ doc: element.ownerDocument, element }),
+        window.happoTakeDOMSnapshot({
+          doc: element.ownerDocument,
+          element,
+          strategy: snapshotStrategy,
+        }),
       elementHandle,
     );
+
     await controller.registerSnapshot({
       ...snapshot,
       component,

package.json

@@ -20,7 +20,7 @@
   "devDependencies": {
     "@playwright/test": "^1.46.0",
     "eslint": "^8.2.0",
-    "happo-e2e": "^2.0.1",
+    "happo-e2e": "^3.3.1",
     "happo.io": "^6.8.0",
     "next": "^12.0.4",
     "react": "^17.0.2",

pages/index.js

@@ -33,6 +33,14 @@ export default function IndexPage() {
       <h1>Hello world</h1>
       <a href="/goodbye">goodbye</a>
       <CanvasImage />
+
+      <div style={{ width: 200 }}>
+        I am 200px wide.
+        <div style={{ width: '100%' }} id="stretch-to-parent">
+          I stretch to 100% width of my parent, which is 200px wide.
+        </div>
+      </div>
+
       <style>{`
         h1 {
           color: red;

tests/app.spec.js

@@ -23,6 +23,20 @@ test('basic test', async ({ page }) => {
     ],
   });
 
+  const stretchToParent = page.locator('#stretch-to-parent');
+
+  await happoPlaywright.screenshot(page, stretchToParent, {
+    component: 'StretchToParent',
+    variant: 'snapshotStrategy hoist',
+    snapshotStrategy: 'hoist',
+  });
+
+  await happoPlaywright.screenshot(page, stretchToParent, {
+    component: 'StretchToParent',
+    variant: 'snapshotStrategy hoist',
+    snapshotStrategy: 'clip',
+  });
+
   await page.click('text=goodbye');
 
   await expect(page.locator('text=Sad to see you go').first()).toBeVisible();