Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
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
90 changes: 75 additions & 15 deletions docs/quickstart/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
sidebar_position: 1
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Admonition from "@theme/Admonition";

# Installation and Setup

## System requirements
Expand All @@ -20,7 +16,7 @@ To run the Testplane installer using `npm`, execute the following command:
npm init testplane@latest YOUR_PROJECT_PATH
```

To configure the project instead of using defaults during initialization, specify the `-v` option.
To configure the project in interactive mode with additional parameters (package manager selection, plugin installation), specify the <nobr>`-v`</nobr> option.

After running the installation command, the following set of files and folders will appear in the project directory:

Expand All @@ -38,25 +34,23 @@ testplane.config.ts

The `testplane.config.ts` file contains a basic set of settings for running tests:

```typescript
```typescript title="testplane.config.ts"
import { setupBrowser } from "@testplane/testing-library";
import type { WdioBrowser } from "testplane";

export default {
gridUrl: "local",
baseUrl: "http://localhost",
pageLoadTimeout: 0,
httpTimeout: 60000,
pageLoadTimeout: 20000,
httpTimeout: 20000,
testTimeout: 90000,
resetCursor: false,

// The `sets` parameter contains information about the directory where the tests are located
// and a list of browsers in which they will be run:
sets: {
desktop: {
files: ["testplane-tests/**/*.testplane.(t|j)s"],
browsers: ["chrome", "firefox"],
},
},

// The `browsers` field describes the configuration of the browsers used:
browsers: {
chrome: {
headless: true,
Expand All @@ -71,7 +65,9 @@ export default {
},
},
},

prepareBrowser: (browser: WdioBrowser) => {
setupBrowser(browser);
},
plugins: {
"html-reporter/testplane": {
enabled: true,
Expand All @@ -80,13 +76,77 @@ export default {
diffMode: "3-up-scaled",
},
},
};
} satisfies import("testplane").ConfigInput;
```

### Key configuration parameters

- `gridUrl` — where to run browsers: `"local"` for local execution or a URL for Selenium Grid or cloud (e.g., BrowserStack, Sauce Labs).
- `sets` — test groups for different browsers (e.g., a test set for desktop Chrome or Firefox and a set for mobile Safari). Learn more: [Sets reference](../reference/config/sets.mdx).
- `testTimeout` — maximum test execution time in milliseconds; the test is aborted after exceeding this limit.
- `pageLoadTimeout` — maximum page load wait time.
- `browsers` — browser configuration; `headless: true` — run without UI. Learn more: [Browsers](../basic-guides/browsers-overview.mdx).
- `prepareBrowser` — hook before tests; in the config above it calls `setupBrowser(browser)` and adds Testing Library methods.
- `plugins` — plugins; in the config above `html-reporter` for interactive reports (screenshots, logs, debugging). Learn more: [HTML Reporter](../html-reporter/overview.mdx).

For a complete list of configuration parameters, see the [configuration reference](../reference/config/main.mdx).

To download the browsers described in the config separately from running Testplane itself, execute the command:

```bash
npx testplane install-deps
```

Without running this command beforehand, missing browsers will be automatically downloaded the first time Testplane is launched.

## First run {#first-run}

After installation and setup, run the test example that was created automatically:

```bash
npx testplane
```

### What happens during the first run

Testplane will automatically perform the following actions:

1. Download browsers: if you haven't run `install-deps`, Testplane will download Chrome and Firefox
2. Run the test: execute the example from `testplane-tests/example.testplane.ts`
3. Generate a report: create an HTML report in the `testplane-report/` folder

### Viewing results

After the tests finish, open the interactive report:

```bash
npx testplane gui
```

The command will start a local server and open the report in your browser. In the interface you will see:

- List of passed tests
- Execution statistics
- Screenshots (if the test uses `assertView`)
- Execution logs

### Expected outcome

If everything is configured correctly, you will see:

```
✔ test examples › docs search test [chrome] - 3.2s
✔ test examples › docs search test [firefox] - 3.5s

Total: 2 Passed: 2 Failed: 0 Skipped: 0 Retries: 0
```

For the tests to pass successfully, they need access to [testplane.io](https://testplane.io/).

## What's next?

Now that Testplane is set up and running, you can:

- [Write your own tests](./writing-tests.mdx): test structure, selectors, and basic commands
- [Run and debug tests](./running-tests.mdx): filtering, GUI mode, debugging
- [Set up CI/CD](./usage-in-ci.mdx): automatic test runs in GitHub Actions
Loading
Loading