feat(cypress): simplify setup

build/rollup.js

@@ -35,6 +35,20 @@ export const buildEs = ({
   plugins: [json(), swcPlugin],
 });
 
+export const buildCjs = ({
+  input = "src/index.ts",
+  output = "dist/index.mjs",
+  external = ignoreRelative,
+} = {}) => ({
+  input,
+  external,
+  output: {
+    file: output,
+    format: "cjs",
+  },
+  plugins: [json(), swcPlugin],
+});
+
 export const buildTypes = ({
   input = "src/index.ts",
   output = "dist/index.d.ts",

packages/browser/package.json

@@ -25,8 +25,8 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
       "default": "./dist/index.mjs"
     },
     "./global.js": {

packages/core/package.json

@@ -7,9 +7,9 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts",
       "default": "./dist/index.mjs"
     },
     "./package.json": "./package.json"

packages/cypress/cypress.config.cjs

@@ -1,7 +1,15 @@
 const { defineConfig } = require("cypress");
+const { registerArgosTask } = require("@argos-ci/cypress/task");
 
 module.exports = defineConfig({
   video: false,
   screenshotOnRunFailure: false,
-  e2e: {},
+  e2e: {
+    async setupNodeEvents(on) {
+      registerArgosTask(on, {
+        uploadToArgos: process.env.UPLOAD_TO_ARGOS === "true",
+        buildName: `argos-cypress-e2e-node-${process.env.NODE_VERSION}-${process.env.OS}`,
+      });
+    },
+  },
 });

packages/cypress/cypress/tsconfig.json

@@ -1,6 +1,7 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "types": ["cypress", "@argos-ci/cypress"],
+    "types": ["cypress", "@argos-ci/cypress/support"],
     "paths": {}
   }
 }

packages/cypress/docs/index.mdx

@@ -19,49 +19,7 @@ While Cypress inherently provides screenshot functionality, the Argos Cypress in
 
 ## Get started
 
-### 1. Installation of Packages
-
-```
-npm install --save-dev @argos-ci/cli @argos-ci/cypress
-```
-
-### 2. Add `cy.argosScreenshot` command
-
-And add this line to your `cypress/support/index.js` file.
-
-```js
-import "@argos-ci/cypress/support";
-```
-
-If you use TypeScript, update your `tsconfig.json`:
-
-```json
-{
-  "compilerOptions": {
-    "types": ["cypress", "@argos-ci/cypress"]
-  }
-}
-```
-
-You can find [library definition here](https://github.com/argos-ci/argos-javascript/blob/main/packages/cypress/src/support.ts).
-
-### 3. Use in your tests
-
-`cy.argosScreenshot` command stabilizes the UI before capturing the screenshot.
-
-```js
-describe("Homepage", () => {
-  it("screenshots the page", () => {
-    // Screenshot a full page
-    cy.argosScreenshot("home");
-
-    // Screenshot a component
-    cy.get("main div.breadcrumb").argosScreenshot("home-breadcrumb");
-  });
-});
-```
-
-By default screenshots are stored in `cypress/screenshots` folder, relative to current directory.
+Please refer to our [Quickstart guide](/quickstart/cypress) to get started with Argos and Cypress.
 
 ## API Overview
 
@@ -70,8 +28,8 @@ By default screenshots are stored in `cypress/screenshots` folder, relative to c
 - `name`: Unique name for the screenshot.
 - `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. More on [injecting CSS](https://argos-ci.com/docs/injecting-css)
+- `options.viewports`: Define specific viewports for capturing screenshots. More on [viewports configuration](/viewports).
+- `options.argosCSS`: Specific CSS applied during the screenshot process. More on [injecting CSS](/injecting-css)
 
 ## Helper Attributes for Visual Testing
 
@@ -88,8 +46,39 @@ For tailored visual testing, the `data-visual-test` attributes provide control o
 <div id="clock" data-visual-test="transparent">...</div>
 ```
 
+### registerArgosTask(on, config[, options])
+
+- `on`: Cypress plugin events.
+- `config`: Cypress config.
+- `options`: All [upload parameters](https://js-sdk-reference.argos-ci.com/interfaces/uploadparameters).
+- `options.uploadToArgos`: Upload results and create a build on Argos, `true` by default.
+
+```ts
+// cypress.config.js
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  // setupNodeEvents can be defined in either
+  // the e2e or component configuration
+  e2e: {
+    async setupNodeEvents(on, config) {
+      require("@argos-ci/cypress/task")(on, config, {
+        uploadToArgos: !!process.env.CI,
+      });
+
+      // include any other plugin code...
+
+      // It's IMPORTANT to return the config object
+      // with any changed environment variables
+      return config;
+    },
+  },
+});
+```
+
 ## Additional Resources
 
+- [Quickstart with Argos + Cypress](/quickstart/cypress)
 - [Example of Argos + Cypress](https://github.com/argos-ci/argos/tree/main/examples/cypress)
 - [@argos-ci/cypress on GitHub](https://github.com/argos-ci/argos-javascript/tree/main/packages/cypress)
 - [@argos-ci/cypress on npm](https://www.npmjs.com/package/@argos-ci/cypress)

packages/cypress/package.json

@@ -23,21 +23,28 @@
     "access": "public"
   },
   "type": "module",
+  "types": "./dist/index.d.ts",
   "exports": {
     "./support": {
-      "import": "./dist/support.mjs",
       "types": "./dist/support.d.ts",
+      "import": "./dist/support.mjs",
       "default": "./dist/support.mjs"
+    },
+     "./task": {
+      "types": "./dist/task.d.ts",
+      "import": "./dist/task.mjs",
+      "require": "./dist/task.cjs",
+      "default": "./dist/task.cjs"
     },
     "./package.json": "./package.json"
   },
-  "types": "./dist/support.d.ts",
   "engines": {
     "node": ">=16.0.0"
   },
   "dependencies": {
     "@argos-ci/browser": "workspace:*",
     "@argos-ci/util": "workspace:*",
+    "@argos-ci/core": "workspace:*",
     "cypress-wait-until": "^1.7.2"
   },
   "peerDependencies": {
@@ -55,7 +62,6 @@
     "prebuild": "rm -rf dist",
     "build": "rollup -c",
     "test": "pnpm exec cypress run",
-    "argos-upload": "pnpm exec argos upload cypress/screenshots --build-name \"argos-cypress-e2e-node-$NODE_VERSION-$OS\"",
-    "e2e": "pnpm run test && pnpm run argos-upload"
+    "e2e": "UPLOAD_TO_ARGOS=true pnpm run test"
   }
 }

packages/cypress/rollup.config.js

@@ -1,4 +1,4 @@
-import { buildEs, buildTypes } from "../../build/rollup.js";
+import { buildCjs, buildEs, buildTypes } from "../../build/rollup.js";
 
 export default [
   buildEs({
@@ -9,4 +9,16 @@ export default [
     input: "src/support.ts",
     output: "dist/support.d.ts",
   }),
+  buildEs({
+    input: "src/task.ts",
+    output: "dist/task.mjs",
+  }),
+  buildTypes({
+    input: "src/task.ts",
+    output: "dist/task.d.ts",
+  }),
+  buildCjs({
+    input: "src/task.ts",
+    output: "dist/task.cjs",
+  }),
 ];

packages/cypress/src/task.ts

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+import { UploadParameters, upload } from "@argos-ci/core";
+
+export type RegisterArgosTaskOptions = Omit<
+  UploadParameters,
+  "files" | "root"
+> & {
+  /**
+   * Upload the report to Argos.
+   * @default true
+   */
+  uploadToArgos?: boolean;
+};
+
+export function registerArgosTask(
+  on: Cypress.PluginEvents,
+  config: Cypress.Config,
+  options?: RegisterArgosTaskOptions,
+) {
+  on("after:run", async () => {
+    const { screenshotsFolder } = config;
+    if (!screenshotsFolder) return;
+    const { uploadToArgos = true } = options || {};
+    if (!uploadToArgos) return;
+    const res = await upload({
+      files: ["**/*.png"],
+      root: screenshotsFolder,
+      ...options,
+    });
+    console.log(`✅ Argos build created: ${res.build.url}`);
+  });
+}

packages/playwright/docs/index.mdx

@@ -39,8 +39,8 @@ Please refer to our [Quickstart guide](/quickstart/playwright) to get started wi
 - `name`: Unique name for the screenshot.
 - `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. More on [injecting CSS](https://argos-ci.com/docs/injecting-css)
+- `options.viewports`: Define specific viewports for capturing screenshots. More on [viewports configuration](/viewports).
+- `options.argosCSS`: Specific CSS applied during the screenshot process. More on [injecting CSS](/injecting-css)
 
 ### Argos Reporter
 
@@ -69,7 +69,7 @@ export default defineConfig({
 
 ## Tests Sharding
 
-Argos seamlessly integrates with [Playwright test sharding](https://playwright.dev/docs/test-sharding), enabling efficient test distribution without the need for manual configuration. [Argos Sharding/Parallel mode](https://argos-ci.com/docs/parallel-testing) is automatically configured for you.
+Argos seamlessly integrates with [Playwright test sharding](https://playwright.dev/docs/test-sharding), enabling efficient test distribution without the need for manual configuration. [Argos Sharding/Parallel mode](/parallel-testing) is automatically configured for you.
 
 ## Helper Attributes for Visual Testing
 

packages/playwright/package.json

@@ -26,14 +26,14 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts",
       "default": "./dist/index.mjs"
     },
     "./reporter": {
-      "import": "./dist/reporter.mjs",
       "types": "./dist/reporter.d.ts",
+      "import": "./dist/reporter.mjs",
       "default": "./dist/reporter.mjs"
     },
     "./package.json": "./package.json"
@@ -57,6 +57,6 @@
     "prebuild": "rm -rf dist",
     "build": "rollup -c",
     "test": "pnpm exec playwright test",
-    "e2e": "pnpm run test"
+    "e2e": "UPLOAD_TO_ARGOS=true pnpm run test"
   }
 }

packages/playwright/playwright.config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
       "@argos-ci/playwright/reporter",
       {
         buildName: `argos-playwright-e2e-node-${process.env.NODE_VERSION}-${process.env.OS}`,
+        uploadToArgos: process.env.UPLOAD_TO_ARGOS === "true",
       } as ArgosReporterOptions,
     ],
   ],

packages/playwright/src/reporter.ts

@@ -44,7 +44,7 @@ const getParallelFromConfig = (
   const argosConfig = readConfig();
   if (!argosConfig.parallelNonce) {
     throw new Error(
-      "Playwright shard mode detected. Please specify ARGOS_PARALLEL_NONCE env variable. Read https://argos-ci.com/docs/parallel-testing",
+      "Playwright shard mode detected. Please specify ARGOS_PARALLEL_NONCE env variable. Read /parallel-testing",
     );
   }
   return {

packages/puppeteer/docs/index.mdx

@@ -54,8 +54,8 @@ Screenshots are stored in `screenshots/argos` folder, relative to current direct
 - `name` - The screenshot name; must be unique
 - `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. More on [injecting CSS](https://argos-ci.com/docs/injecting-css)
+- `options.viewports` - Specifies the viewports for which to capture screenshots. See [viewports configuration](/viewports).
+- `options.argosCSS`: Specific CSS applied during the screenshot process. More on [injecting CSS](/injecting-css)
 
 ## Helper Attributes for Visual Testing
 

packages/puppeteer/package.json

@@ -26,9 +26,9 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts",
       "default": "./dist/index.mjs"
     },
     "./package.json": "./package.json"

packages/util/package.json

@@ -15,13 +15,13 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
       "default": "./dist/index.mjs"
     },
     "./browser": {
-      "import": "./dist/browser.mjs",
       "types": "./dist/browser.d.ts",
+      "import": "./dist/browser.mjs",
       "default": "./dist/browser.mjs"
     },
     "./package.json": "./package.json"

tsconfig.json

@@ -15,7 +15,7 @@
     "target": "ES2021",
     "importHelpers": true,
     "declaration": true,
-    "sourceMap": true,
+    "sourceMap": false,
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,