Add breakpoint variants

Author: domoscargin

shared/tasks/browser.mjs

@@ -96,16 +96,32 @@ export async function screenshotComponent(browser, componentName, options) {
 
   const screenshotName = `${componentName}${printExampleName}`
 
-  // Disable JavaScript
-  if (options.screenshot.variants?.includes('no-js')) {
-    await percySnapshotNoJs(page, screenshotName, snapshotOptions)
-  }
-
-  // Default screenshot
-  if (
-    options.screenshot === true ||
-    options.screenshot.variants?.includes('default')
-  ) {
+  if (Array.isArray(options.screenshot.variants)) {
+    const variants = options.screenshot.variants
+    // Default screenshot
+    if (variants.includes('default')) {
+      await percySnapshot(page, `js: ${screenshotName}`, snapshotOptions)
+    }
+    // Disable JavaScript
+    if (variants.includes('no-js')) {
+      await percySnapshotNoJs(page, screenshotName, snapshotOptions)
+    }
+    // Mobile screenshot
+    if (variants.includes('mobile')) {
+      await percySnapshot(page, `js: ${screenshotName}`, {
+        ...snapshotOptions,
+        widths: [320]
+      })
+    }
+    // Tablet screenshot
+    if (variants.includes('tablet')) {
+      await percySnapshot(page, `js: ${screenshotName}`, {
+        ...snapshotOptions,
+        widths: [641]
+      })
+    }
+  } else {
+    // No variants, take default screenshot
     await percySnapshot(page, `js: ${screenshotName}`, snapshotOptions)
   }