Merge pull request #93 from argos-ci/improve-css-injection

feat: add "__argos__" global class
argos-ci · Dec 13, 2023 · b45c874 · b45c874
2 parents f660148 + 69f129a
commit b45c874
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 19 deletions.
diff --git a/packages/browser/src/stabilization.ts b/packages/browser/src/stabilization.ts
@@ -150,6 +150,14 @@ export function restoreElementPositions(document: Document) {
   });
 }
 
+export function addGlobalClass(document: Document, className: string) {
+  document.documentElement.classList.add(className);
+}
+
+export function removeGlobalClass(document: Document, className: string) {
+  document.documentElement.classList.remove(className);
+}
+
 export type SetupOptions = { fullPage?: boolean; argosCSS?: string };
 
 /**
@@ -159,6 +167,7 @@ export function setup(
   document: Document,
   { fullPage, argosCSS }: SetupOptions = {},
 ) {
+  addGlobalClass(document, "__argos__");
   injectGlobalStyles(document, GLOBAL_CSS, "argos-reset-style");
   if (argosCSS) {
     injectGlobalStyles(document, argosCSS, "argos-user-style");
@@ -178,6 +187,7 @@ export function teardown(
   document: Document,
   { fullPage, argosCSS }: SetupOptions = {},
 ) {
+  removeGlobalClass(document, "__argos__");
   removeGlobalStyles(document, "argos-reset-style");
   if (argosCSS) {
     removeGlobalStyles(document, "argos-user-style");

diff --git a/packages/cypress/docs/index.mdx b/packages/cypress/docs/index.mdx
@@ -71,7 +71,7 @@ By default screenshots are stored in `cypress/screenshots` folder, relative to c
 - `options`: Explore [cy.screenshot command options](https://docs.cypress.io/api/commands/screenshot) for details.
 - `options.element`: Use an ElementHandle or string selector to capture a specific element's screenshot.
 - `options.viewports`: Define specific viewports for capturing screenshots. More on [viewports configuration](https://argos-ci.com/docs/viewports).
-- `options.argosCSS`: Specific CSS applied during the screenshot process.
+- `options.argosCSS`: Specific CSS applied during the screenshot process. More on [Argos-specific CSS](https://argos-ci.com/docs/specific-css)
 
 ## Helper Attributes for Visual Testing
 

diff --git a/packages/playwright/docs/index.mdx b/packages/playwright/docs/index.mdx
@@ -95,7 +95,7 @@ Execute your Playwright tests in the usual manner. Screenshots will be auto-uplo
 - `options`: Explore [Page.screenshot command options](https://playwright.dev/docs/api/class-page#page-screenshot) for details.
 - `options.element`: Use an ElementHandle or string selector to capture a specific element's screenshot.
 - `options.viewports`: Define specific viewports for capturing screenshots. More on [viewports configuration](https://argos-ci.com/docs/viewports).
-- `options.argosCSS`: Specific CSS applied during the screenshot process.
+- `options.argosCSS`: Specific CSS applied during the screenshot process. More on [Argos-specific CSS](https://argos-ci.com/docs/specific-css)
 
 ### Argos Reporter
 

diff --git a/packages/playwright/fixtures/dummy.html b/packages/playwright/fixtures/dummy.html
@@ -44,6 +44,9 @@
         border: 1px solid black;
         overflow: scroll;
       }
+      .__argos__ h1 {
+        font-variant: small-caps;
+      }
     </style>
   </head>
   <body>

diff --git a/packages/puppeteer/docs/index.mdx b/packages/puppeteer/docs/index.mdx
@@ -55,7 +55,7 @@ Screenshots are stored in `screenshots/argos` folder, relative to current direct
 - `options` - See [Page.screenshot command options](https://pptr.dev/next/api/puppeteer.page.screenshot/)
 - `options.element` - Accept an ElementHandle or a string selector to screenshot an element
 - `options.viewports` - Specifies the viewports for which to capture screenshots. See [viewports configuration](https://argos-ci.com/docs/viewports).
-- `options.argosCSS`: Specific CSS applied during the screenshot process.
+- `options.argosCSS`: Specific CSS applied during the screenshot process. More on [Argos-specific CSS](https://argos-ci.com/docs/specific-css)
 
 ## Helper Attributes for Visual Testing
 

diff --git a/packages/puppeteer/test.spec.js b/packages/puppeteer/test.spec.js
@@ -74,22 +74,6 @@ describe("argosScreenshot", () => {
       expect(loaderContainer.trim()).toBe("");
     });
 
-    it("hides div with data-visual-test='transparent'", async () => {
-      const opacityStyle = await page.$eval(
-        "div[data-visual-test='transparent']",
-        (div) => getComputedStyle(div).opacity,
-      );
-      expect(opacityStyle).toBe("0");
-    });
-
-    it("removes div with data-visual-test='removed'", async () => {
-      const displayStyle = await page.$eval(
-        "div[data-visual-test='removed']",
-        (div) => getComputedStyle(div).display,
-      );
-      expect(displayStyle).toBe("none");
-    });
-
     it("takes a screenshot", async () => {
       await expectScreenshotToExists("page");
     });