docs: add examples

.eslintignore

@@ -6,3 +6,4 @@ dist
 /packages/gatsby-plugin-screenshot/gatsby-node.js
 /docs
 __fixtures__/screenshots/invalid.argos.json
+/examples

.prettierignore

@@ -11,4 +11,5 @@ dist
 /packages/gatsby-plugin-screenshot/gatsby-node.js
 /docs
 __fixtures__/screenshots/invalid.argos.json
-packages/api-client/src/schema.ts
+packages/api-client/src/schema.ts
+/examples

examples/circleci/.circleci/config.yml

@@ -0,0 +1,28 @@
+version: 2.1
+orbs:
+  node: circleci/node@5.0.2
+
+jobs:
+  upload_screenshots:
+    executor: node/default
+    steps:
+      - checkout
+      - node/install-packages:
+          pkg-manager: npm
+
+      # -----
+      # Insert here your steps required to take screenshots of
+      # your components or of your application.
+      #
+      # Find integrations on https://argos-ci.com/docs
+      # -----
+
+      - run:
+          name: Upload screenshots to argos-ci.com
+          command: npm exec -- argos upload ./screenshots
+          # Put `ARGOS_TOKEN` in your secrets on Circle CI.
+
+workflows:
+  ci:
+    jobs:
+      - upload_screenshots

examples/circleci/.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+
+# Ignore screenshots
+screenshots/*
+
+# Add screenshots folder (empty)
+!screenshots/.gitkeep

examples/circleci/README.md

@@ -0,0 +1,19 @@
+<p align="center">
+  <a href="https://argos-ci.com/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://raw.githubusercontent.com/argos-ci/argos/main/resources/logos/logo-github-readme.png" alt="Argos" width="300" height="61">
+  </a>
+</p>
+
+# Example of Argos running on CircleCI
+
+This example showcases Argos Visual Testing running on [CircleCI](https://circleci.com/).
+
+## Setup
+
+- Follow [Argos getting started guide](https://argos-ci.com/docs) to obtain a Argos token.
+- Add `ARGOS_TOKEN` as an [masked environment variable on CircleCI](https://circleci.com/docs/env-vars)
+
+## Links
+
+- [Official Argos Docs](https://argos-ci.com/docs)
+- [Discord](https://argos-ci.com/discord)

examples/circleci/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "devDependencies": {
+    "@argos-ci/cli": "latest"
+  }
+}

examples/cypress/.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+cypress/videos/
+
+# Ignore Cypress screenshots
+cypress/screenshots/*
+
+# Add Cypress screenshots folder (empty)
+!cypress/screenshots/.gitkeep

examples/cypress/README.md

@@ -0,0 +1,22 @@
+<p align="center">
+  <a href="https://argos-ci.com/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://raw.githubusercontent.com/argos-ci/argos/main/resources/logos/logo-github-readme.png" alt="Argos" width="300" height="61">
+  </a>
+</p>
+
+# Example of Argos + Cypress
+
+This example showcases Argos Visual Testing integrated to [Cypress](https://www.cypress.io/) testing framework.
+
+## Integrate with CI
+
+This example only shows how to takes screenshots using Argos + Cypress.
+
+It does not include any CI integration on purpose to keep it as clear as possible.
+
+Read [Argos documentations](https://argos-ci.com/docs) or explore [examples](https://github.com/argos-ci/argos/tree/main/examples) to find the best way to integrate your CI.
+
+## Links
+
+- [Official Argos Docs](https://argos-ci.com/docs)
+- [Discord](https://argos-ci.com/discord)

examples/cypress/cypress.config.js

@@ -0,0 +1,17 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  // setupNodeEvents can also be defined in "component"
+  e2e: {
+    setupNodeEvents(on, config) {
+      require("@argos-ci/cypress/task")(on, config, {
+        // Enable upload to Argos only when it runs on CI.
+        uploadToArgos: !!process.env.CI,
+        // Set your Argos token (required only if you don't use GitHub Actions).
+        token: "<YOUR-ARGOS-TOKEN>",
+      });
+
+      // include any other plugin code...
+    },
+  },
+});

examples/cypress/cypress/e2e/1-getting-started/todo.cy.js

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// Welcome to Cypress + Argos!
+
+// This spec file is an extract of the first example generated by Cypress.
+//
+// We have added the `cy.argosSnapshot` command
+// introduced by @argos/cypress package to take screenshots.
+
+describe("example to-do app", () => {
+  beforeEach(() => {
+    cy.visit("https://example.cypress.io/todo");
+  });
+
+  it("displays two todo items by default", () => {
+    cy.get(".todo-list li").should("have.length", 2);
+    cy.get(".todo-list li").first().should("have.text", "Pay electric bill");
+    cy.get(".todo-list li").last().should("have.text", "Walk the dog");
+
+    // 👇 That's how we take screenshot
+    cy.argosScreenshot("with two items");
+  });
+
+  it("can add new todo items", () => {
+    const newItem = "Feed the cat";
+    cy.get("[data-test=new-todo]").type(`${newItem}{enter}`);
+    cy.get(".todo-list li")
+      .should("have.length", 3)
+      .last()
+      .should("have.text", newItem);
+
+    //👇 Here, an other screenshot will be taken
+    cy.argosScreenshot("with an added item");
+  });
+});

examples/cypress/cypress/support/e2e.js

@@ -0,0 +1,16 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+// Add support of `argosScreenshot` command
+import "@argos-ci/cypress/support";

examples/cypress/package.json

@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "scripts": {
+    "cypress:open": "cypress open"
+  },
+  "devDependencies": {
+    "@argos-ci/cypress": "latest",
+    "cypress": "latest"
+  }
+}

examples/github-actions/.github/workflows/ci.yml

@@ -0,0 +1,35 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: current
+
+      - name: Install dependencies
+        run: npm ci
+
+      # -----
+      # Insert here your steps required to take screenshots of
+      # your components or of your application.
+      #
+      # Find integrations on https://argos-ci.com/docs
+      # -----
+
+      - name: Upload screenshots to argos-ci.com
+        run: npm exec -- argos upload ./screenshots
+        env:
+          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}

examples/github-actions/.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+
+# Ignore screenshots
+screenshots/*
+
+# Add screenshots folder (empty)
+!screenshots/.gitkeep

examples/github-actions/README.md

@@ -0,0 +1,19 @@
+<p align="center">
+  <a href="https://argos-ci.com/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://raw.githubusercontent.com/argos-ci/argos/main/resources/logos/logo-github-readme.png" alt="Argos" width="300" height="61">
+  </a>
+</p>
+
+# Example of Argos running on GitHub Actions
+
+This example showcases Argos Visual Testing running on [GitHub Actions](https://github.com/features/actions).
+
+## Setup
+
+- Follow [Argos getting started guide](https://argos-ci.com/docs) to obtain a Argos token.
+- Add `ARGOS_TOKEN` as a [GitHub Actions Secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets)
+
+## Links
+
+- [Official Argos Docs](https://argos-ci.com/docs)
+- [Discord](https://argos-ci.com/discord)

examples/github-actions/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "devDependencies": {
+    "@argos-ci/cli": "latest"
+  }
+}

examples/nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/nextjs/README.md

@@ -0,0 +1,20 @@
+<p align="center">
+  <a href="https://argos-ci.com/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://raw.githubusercontent.com/argos-ci/argos/main/resources/logos/logo-github-readme.png" alt="Argos" width="300" height="61">
+  </a>
+</p>
+
+# Example of Argos + Next.js
+
+This example showcases Argos Visual Testing integrated to [Next.js](https://nextjs.org/).
+
+## Integrate with CI
+
+This example shows how configure GitHub Actions to run Playwright on your CI.
+
+Read [Argos documentations](https://argos-ci.com/docs) or explore [examples](https://github.com/argos-ci/argos/tree/main/examples) to find the best way to integrate your CI.
+
+## Links
+
+- [Official Argos Docs](https://argos-ci.com/docs)
+- [Discord](https://argos-ci.com/discord)

examples/nextjs/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;

examples/nextjs/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "argos-next-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "14.1.4",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@argos-ci/playwright": "^2.0.0",
+    "@playwright/test": "^1.42.1",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.4",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5"
+  }
+}