Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions .github/workflows/build-docs.yml

This file was deleted.

8 changes: 7 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Official Argos SDKs for JavaScript

Expand All @@ -22,5 +22,11 @@ All Argos JavaScript SDK packages are centralized in that mono-repo, usually ava

For each major JavaScript platform, there is a specific high-level SDK that provides all the tools you need in a single package. Please refer to the README and instructions of those SDKs for more detailed information:

- [`@argos-ci/playwright`](https://github.com/argos-ci/argos-javascript/tree/main/packages/playwright): capture screenshots from your [Playwright](https://playwright.dev/) tests
- [`@argos-ci/cypress`](https://github.com/argos-ci/argos-javascript/tree/main/packages/cypress): capture screenshots from your [Cypress](https://www.cypress.io/) tests
- [`@argos-ci/puppeteer`](https://github.com/argos-ci/argos-javascript/tree/main/packages/puppeteer): capture screenshots from your [Puppeteer](https://github.com/puppeteer/puppeteer) tests
- [`@argos-ci/webdriverio`](https://github.com/argos-ci/argos-javascript/tree/main/packages/webdriverio): capture screenshots from your [WebdriverIO](https://webdriver.io) tests
- [`@argos-ci/storybook`](https://github.com/argos-ci/argos-javascript/tree/main/packages/storybook): capture screenshots of your [Storybook](https://storybook.js.org/) stories
- [`@argos-ci/vitest`](https://github.com/argos-ci/argos-javascript/tree/main/packages/vitest): capture screenshots from your [Vitest](https://vitest.dev/) browser tests
- [`@argos-ci/cli`](https://github.com/argos-ci/argos-javascript/tree/main/packages/cli): interact with and upload screenshots to [argos-ci.com](https://argos-ci.com) via command line
- [`@argos-ci/core`](https://github.com/argos-ci/argos-javascript/tree/main/packages/core): SDK for Node.js, the base to create other integrations
2 changes: 1 addition & 1 deletion examples/circleci/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos running on CircleCI

Expand Down
2 changes: 1 addition & 1 deletion examples/cypress/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos + Cypress

Expand Down
2 changes: 1 addition & 1 deletion examples/github-actions/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos running on GitHub Actions

Expand Down
2 changes: 1 addition & 1 deletion examples/nextjs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos + Next.js

Expand Down
2 changes: 1 addition & 1 deletion examples/playwright/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos + Playwright

Expand Down
2 changes: 1 addition & 1 deletion examples/playwright/tests/example.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { argosScreenshot } from "@argos-ci/playwright";
import { test } from "@playwright/test";

// Read more about streamline page screenshot captures
// https://argos-ci.com/docs/screenshot-pages-script#playwright
// https://argos-ci.com/docs/learn/how-to-guides/visual-coverage/capture-screenshots-from-urls

test("screenshot homepage", async ({ page }, workerInfo) => {
const url = "https://playwright.dev/";
Expand Down
2 changes: 1 addition & 1 deletion examples/puppeteer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos + Puppeteer

Expand Down
2 changes: 1 addition & 1 deletion examples/react-router/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos + React Router

Expand Down
2 changes: 1 addition & 1 deletion examples/remix/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos + Remix

Expand Down
4 changes: 2 additions & 2 deletions examples/storybook-legacy/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos + Storybook and Storycap

Expand All @@ -17,7 +17,7 @@ This example showcases Argos Visual Testing integrated to [Storybook](https://st

This example shows how configure GitHub Actions to run build Storybook and capture screenshots with Storycap on your CI.

Read Argos' [Storybook (\<v8)](https://argos-ci.com/docs/quickstart/storybook-legacy) to learn how to integrate Argos with Storybook.
Read Argos' [Storybook (\<v8)](https://argos-ci.com/docs/quickstart/storybook-quickstart/storybook-legacy-less-than-v8-quickstart) to learn how to integrate Argos with Storybook.

## Links

Expand Down
6 changes: 3 additions & 3 deletions examples/storybook-test-runner/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos + Storybook Test Runner

Expand All @@ -23,7 +23,7 @@ Read [Argos documentations](https://argos-ci.com/docs) or explore [Storybook Tes

## Links

- [Quickstart with Argos + Storybook Test Runner](https://argos-ci.com/docs/quickstart/storybook-test-runner)
- [Storybook SDK Reference](https://argos-ci.com/docs/storybook)
- [Quickstart with Argos + Storybook Test Runner](https://argos-ci.com/docs/quickstart/storybook-quickstart/storybook-test-runner-quickstart)
- [Storybook SDK Reference](https://argos-ci.com/docs/sdks-reference/storybook)
- [Official Argos Docs](https://argos-ci.com/docs)
- [Discord](https://argos-ci.com/discord)
6 changes: 3 additions & 3 deletions examples/storybook-vitest/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos + Storybook Vitest

Expand All @@ -23,7 +23,7 @@ Read [Argos documentations](https://argos-ci.com/docs) or explore [Storybook Tes

## Links

- [Quickstart with Argos + Storybook + Vitest](https://argos-ci.com/docs/quickstart/storybook)
- [Storybook SDK Reference](https://argos-ci.com/docs/storybook)
- [Quickstart with Argos + Storybook + Vitest](https://argos-ci.com/docs/quickstart/storybook-quickstart)
- [Storybook SDK Reference](https://argos-ci.com/docs/sdks-reference/storybook)
- [Official Argos Docs](https://argos-ci.com/docs)
- [Discord](https://argos-ci.com/discord)
2 changes: 1 addition & 1 deletion examples/storybook-vitest/vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default defineConfig({
})

// The plugin will capture screenshots of your stories and upload them to Argos.
// See options at: https://argos-ci.com/docs/storybook
// See options at: https://argos-ci.com/docs/sdks-reference/storybook
argosVitestPlugin({
// Upload to Argos on CI only.
uploadToArgos: !!process.env.CI,
Expand Down
2 changes: 1 addition & 1 deletion examples/travis/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos running on Travis

Expand Down
2 changes: 1 addition & 1 deletion examples/webdriver-io/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Example of Argos + WebdriverIO

Expand Down
40 changes: 37 additions & 3 deletions packages/api-client/README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,49 @@
<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">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/argos-ci/argos/main/resources/logos/github-readme-logo-dark.png">
<img alt="Argos" src="https://raw.githubusercontent.com/argos-ci/argos/main/resources/logos/github-readme-logo-light.png" width="360" height="70">
</picture>
</a>
</p>

_Argos is a visual testing solution that fits in your workflow to avoid visual regression. Takes screenshots on each commit and be notified if something changes._
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Argos API Client

Argos API Client to interact with Argos API.
A typed client for the [Argos API](https://api.argos-ci.com/v2/), built on [openapi-fetch](https://openapi-ts.dev/openapi-fetch/).

[![npm version](https://img.shields.io/npm/v/@argos-ci/api-client.svg)](https://www.npmjs.com/package/@argos-ci/api-client)
[![npm dm](https://img.shields.io/npm/dm/@argos-ci/api-client.svg)](https://www.npmjs.com/package/@argos-ci/api-client)
[![npm dt](https://img.shields.io/npm/dt/@argos-ci/api-client.svg)](https://www.npmjs.com/package/@argos-ci/api-client)

## Installation

```sh
npm install @argos-ci/api-client
```

## Usage

Create a client and call any endpoint. Requests and responses are fully typed from the Argos OpenAPI schema:

```ts
import { createClient } from "@argos-ci/api-client";

const client = createClient({
authToken: process.env.ARGOS_TOKEN,
});

const { data, error } = await client.GET("/project");

if (error) {
throw new Error(error.error);
}

console.log(data);
```

## Links

- [Official Docs](https://argos-ci.com/docs)
- [Discord](https://argos-ci.com/discord)
7 changes: 5 additions & 2 deletions packages/browser/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,19 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Argos Browser

Browser utilities to stabilize visual testing.
Low-level browser utilities that stabilize the page before a screenshot is taken — waiting for fonts and images to load, hiding scrollbars and text carets, and resolving viewports.

[![npm version](https://img.shields.io/npm/v/@argos-ci/browser.svg)](https://www.npmjs.com/package/@argos-ci/browser)
[![npm dm](https://img.shields.io/npm/dm/@argos-ci/browser.svg)](https://www.npmjs.com/package/@argos-ci/browser)
[![npm dt](https://img.shields.io/npm/dt/@argos-ci/browser.svg)](https://www.npmjs.com/package/@argos-ci/browser)

> This package is an internal building block used by the higher-level Argos SDKs (Playwright, Cypress, Puppeteer, …). You usually don't need to install it directly — pick the integration for your test framework instead.

## Links

- [Official SDK Docs](https://argos-ci.com/docs)
- [Discord](https://argos-ci.com/discord)
29 changes: 26 additions & 3 deletions packages/cli/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,39 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Argos Command Line Interface

Argos CLI is used to interact with and upload screenshots to [argos-ci.com](https://argos-ci.com) via command line.
Interact with and upload screenshots to [argos-ci.com](https://argos-ci.com) from the command line.

[![npm version](https://img.shields.io/npm/v/@argos-ci/cli.svg)](https://www.npmjs.com/package/@argos-ci/cli)
[![npm dm](https://img.shields.io/npm/dm/@argos-ci/cli.svg)](https://www.npmjs.com/package/@argos-ci/cli)
[![npm dt](https://img.shields.io/npm/dt/@argos-ci/cli.svg)](https://www.npmjs.com/package/@argos-ci/cli)

Visit the [Argos CLI documentation](https://argos-ci.com/docs/sdks-reference/argos-command-line-interface-cli) for the full command reference and more.

## Installation

```sh
npm install --save-dev @argos-ci/cli
```

## Usage

Upload a directory of screenshots to Argos. Authenticate with your project token via the `ARGOS_TOKEN` environment variable:

```sh
ARGOS_TOKEN="<your-argos-token>" npx @argos-ci/cli upload ./screenshots
```

The CLI also exposes commands to `deploy` a static build, inspect and `review` builds, post a `comment`, and more. List them all with:

```sh
npx @argos-ci/cli --help
```

## Links

- [Official CLI Docs](https://argos-ci.com/docs)
- [Official CLI Docs](https://argos-ci.com/docs/sdks-reference/argos-command-line-interface-cli)
- [Discord](https://argos-ci.com/discord)
2 changes: 1 addition & 1 deletion packages/cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"url": "https://github.com/argos-ci/argos-javascript.git",
"directory": "packages/core"
},
"homepage": "https://argos-ci.com/docs/argos-cli",
"homepage": "https://argos-ci.com/docs/sdks-reference/argos-command-line-interface-cli",
"bugs": {
"url": "https://github.com/argos-ci/argos-javascript/issues"
},
Expand Down
36 changes: 32 additions & 4 deletions packages/core/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,45 @@
</a>
</p>

<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>

# Argos JavaScript SDK Core
# Argos Node.js SDK

Argos Core JavaScript SDK contains interface definitions, base classes and utilities for building Argos JavaScript SDKs, like `@argos-ci/cli` or using it directly with Node.js.
Node.js SDK for visual testing with Argos. It powers the Argos CLI and the higher-level integrations (Playwright, Cypress, …), and can be used directly to upload screenshots from Node.js.

[![npm version](https://img.shields.io/npm/v/@argos-ci/core.svg)](https://www.npmjs.com/package/@argos-ci/core)
[![npm dm](https://img.shields.io/npm/dm/@argos-ci/core.svg)](https://www.npmjs.com/package/@argos-ci/core)
[![npm dt](https://img.shields.io/npm/dt/@argos-ci/core.svg)](https://www.npmjs.com/package/@argos-ci/core)

Visit the [Node.js SDK documentation](https://argos-ci.com/docs/sdks-reference/node.js-sdk) for guides, the API reference, and more.

## Installation

```sh
npm install @argos-ci/core
```

## Usage

Upload a directory of screenshots to Argos and create a build:

```ts
import { upload } from "@argos-ci/core";

const { build } = await upload({
// Directory containing the screenshots.
root: "./screenshots",
// Globs matching the screenshots to upload.
files: ["**/*.png"],
// Defaults to the ARGOS_TOKEN environment variable.
token: process.env.ARGOS_TOKEN,
});

console.log(`Build created: ${build.url}`);
```

## Links

- [Official SDK Docs](https://argos-ci.com/docs)
- [Official SDK Docs](https://argos-ci.com/docs/sdks-reference/node.js-sdk)
- [API Reference](https://js-sdk-reference.argos-ci.com)
- [Discord](https://argos-ci.com/discord)
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"url": "https://github.com/argos-ci/argos-javascript.git",
"directory": "packages/core"
},
"homepage": "https://argos-ci.com/docs/node-sdk",
"homepage": "https://argos-ci.com/docs/sdks-reference/node.js-sdk",
"bugs": {
"url": "https://github.com/argos-ci/argos-javascript/issues"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/ci-environment/github.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ To resolve this, Argos requires a GITHUB_TOKEN to fetch the pull request associa

GITHUB_TOKEN: \${{ secrets.GITHUB_TOKEN }}

For more details, check out the documentation: Read more at https://argos-ci.com/docs/run-on-preview-deployment
For more details, check out the documentation: Read more at https://argos-ci.com/docs/learn/how-to-guides/ci-pipelines/run-on-preview-deployments

If you want to disable this warning, you can set the following environment variable:

Expand Down
Loading
Loading