# @devtools-ai/cypress-sdk

> DevTools AI Javascript plugin for Cypress

Latest version **0.1.27** (published 2023-05-05) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @devtools-ai/cypress-sdk
pnpm add @devtools-ai/cypress-sdk
yarn add @devtools-ai/cypress-sdk
bun add @devtools-ai/cypress-sdk
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.27 |
| Published | 2023-05-05 |
| First published | 2022-06-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 59.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | DevTools AI |
| Maintainers | etienne_devtools_ai, jgarnica, chris-devtools |
| Keywords | cypress |

## Links

- npm: https://www.npmjs.com/package/@devtools-ai/cypress-sdk
- npm.io page: https://npm.io/package/@devtools-ai/cypress-sdk

## Dependencies (5)

- [open](https://npm.io/package/open.md) ^8.4.0
- [dotenv](https://npm.io/package/dotenv.md) ^16.0.1
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.1.1
- [fast-glob](https://npm.io/package/fast-glob.md) ^3.2.11
- [@devtools-ai/js-sdk](https://npm.io/package/@devtools-ai/js-sdk.md) 0.1.5

## Alternatives

- [@snazzah/davey](https://npm.io/package/@snazzah/davey.md) — 1.5M weekly downloads
- [@vendure/testing](https://npm.io/package/@vendure/testing.md) — 8.3K weekly downloads
- [vue-simple-context-menu](https://npm.io/package/vue-simple-context-menu.md) — 6.6K weekly downloads
- [cypress-webpack-preprocessor-v5](https://npm.io/package/cypress-webpack-preprocessor-v5.md) — 2.1K weekly downloads
- [@backstage/plugin-catalog-backend-module-puppetdb](https://npm.io/package/@backstage/plugin-catalog-backend-module-puppetdb.md) — 1.3K weekly downloads

## Recent versions

- 0.1.27 (latest) — 2023-05-05
- 0.1.4-0 (next) — 2022-08-30
- 0.1.24 — 2023-03-13
- 0.1.23 — 2023-03-04
- 0.1.22 — 2023-03-02
- 0.1.21 — 2023-03-01
- 0.1.19 — 2023-02-28
- 0.1.18 — 2023-02-28
- 0.1.16 — 2023-02-10
- 0.1.15 — 2023-02-10
- 0.1.13 — 2023-01-25
- 0.1.11 — 2023-01-23
- 0.1.8 — 2023-01-13
- 0.1.5 — 2022-09-21
- 0.1.3 — 2022-09-08
- … 9 more at https://npm.io/package/@devtools-ai/cypress-sdk/versions

## README

[![dev-tools.ai sdk logo](https://docs.dev-tools.ai/img/logo.svg)](https://dev-tools.ai/)

[![npm version](https://badge.fury.io/js/@devtools-ai%2Fcypress-sdk.svg)](https://badge.fury.io/js/@devtools-ai%2Fcypress-sdk)

### Installation

Installation is simple. First add and install the package in your project.

#### Cypress 10

```sh
npm install --save @devtools-ai/cypress-sdk -D
```

```sh
yarn add @devtools-ai/cypress-sdk --dev
```

Then add to your `cypress/support/index.js`

```js
import '@devtools-ai/cypress-sdk';
```

Then in your `cypress.config.ts` or `cypress.config.js` file. Import the plugin tasks and disable chromeWebSecurity.

```js
import { defineConfig } from 'cypress';
import { registerSmartDriverTasks } from '@devtools-ai/cypress-sdk/dist/plugins';
export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      registerSmartDriverTasks(on, config);
      // implement node event listeners here
      return config;
    },
  },
  chromeWebSecurity: false,
});
```

Lastly, whenever you want to have the plugin enabled, allow for at least 1 retry for the test written. This allows the plugin to attempt getting the element once the test has failed getting the element normally.

```js
describe('Should be able to login', () => {
  it(
    'Login',
    {
      retries: {
        // SmartDriver is used on the retries
        openMode: 3,
      },
    },
    () => {
      cy.visit('http://www.github.com/login');
      cy.get('login-box').type('mysampleemail@gmail.com');
    },
  );
});
```

Done! 🎉

#### Cypress 9

```sh
npm install --save @devtools-ai/cypress-sdk -D
```

```sh
yarn add @devtools-ai/cypress-sdk --dev
```

Then add to your `cypress/support/index.js`

```js
import '@devtools-ai/cypress-sdk';
```

Then in your `plugins/index.js` file. Import the plugin tasks and disable chromeWebSecurity in `cypress.json` file.

```js
// plugins/index.js
const {
  registerSmartDriverTasks,
} = require('@devtools-ai/cypress-sdk/dist/plugins');

module.exports = (on, config) => {
  registerSmartDriverTasks(on, config);
  return config;
};
```

`cypress.json`

```json
{
  "chromeWebSecurity": false
}
```

Lastly, whenever you want to have the plugin enabled, allow for at least 1 retry for the test written. This allows the plugin to attempt getting the element once the test has failed getting the element normally.

```js
describe('Should be able to login', () => {
  it(
    'Login',
    {
      retries: {
        // SmartDriver is used on the retries
        openMode: 3,
      },
    },
    () => {
      cy.visit('http://www.github.com/login');
      cy.get('login-box').type('mysampleemail@gmail.com');
    },
  );
});
```

Done! 🎉

### Setting up the plugin

To get started, create a file in your project root folder called `smartdriver.config.js`. Then add your API key in it:

```js
module.exports = {
  apiKey: 'YOUR_API_KEY_HERE',
};
```

This file may also contain any options for the [JS sdk](https://www.npmjs.com/package/@devtools-ai/js-sdk).

### Interactive Mode

You may also want to enable to interactive mode. Interactive mode pauses the test so you can enter bounding boxes for test elements. These boxes only need to be added once during initial detection. You can enable this mode by exporting this environment variable and setting to true :

```
export DEVTOOLSAI_INTERACTIVE=TRUE
```

You can add this in the `cypress.config.ts` file.

```js
export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // bind to the event we care about
      registerSmartDriverTasks(on, config);
      return config;
    },
    env: {
      DEVTOOLSAI_INTERACTIVE: true,
    },
  },
  watchForFileChanges: true,
  chromeWebSecurity: false,
});
```

You can also add it to your `.env` file to avoid committing it.

```
 DEVTOOLSAI_INTERACTIVE=true
```

### Sample usage

The SmartDriver will automatically kick in once getting an element fails. This applies for the "get" and "find" cypress commands.

```js
cy.get('[name="login"]').type(username);
```

There is also a unique command, `findByAI`, that allows you to use human readable names instead of relying on selectors.

```js
cy.findByAI('username-input-field').type(username);
```

### Tutorial

We have a detailed step-by-step tutorial to help you get set up with the SDK: https://docs.dev-tools.ai/cypressio-basic-test-case

---
_Source: https://npm.io/package/@devtools-ai/cypress-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._