> For the complete documentation index, see [llms.txt](https://amartyushov.gitbook.io/tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://amartyushov.gitbook.io/tech/testing/testcafe.md).

# Testcafe

## What is it

* node.js tool to automate e2e testing
* tests can be written in JS and Typescript
* no webdriver is needed

### Browsers support

Most of modern browsers locally installed can be detected: Google Chrome (Stable, Beta, Dev and Canary), Internet Explorer (11+), Microsoft Edge, Mozilla Firefox, Safari, Android browser, Safari mobile.

If these browsers are locally installed then TestCafe will detect it.

Run `testcafe --list-browsers` to list which browsers TestCafe automatically detects.

## Installation

```
yarn add --dev testcafe
```

## How does it work

TestCafe uses a proxy server, it injects scripts in the page then we can inspect the elements.

Each test receives a test controller as a parameter. The test controller is an object that allows us to access the test api. We’ll use it for actions and assertions.

## How to run a test

```
testcafe chrome test.js
```

### Live mode

```
testcafe chrome e2e/**/* -L
```

## Code structure

### Test code simple structure

```javascript
fixture `Getting Started`
 .page `https://blog.xebia.fr`;
test('My first test', async t => {
 // Test code
});
```

### [Page object pattern](https://devexpress.github.io/testcafe/documentation/guides/concepts/page-model.html)

## Capabilities

### Selector

Selector is a function that identifies a webpage element in the test. The selector API provides methods and properties to select elements on the page and get their state. \
TestCafe uses standard CSS selectors to locate elements. It’s like when you use `document.querySelector` in JS (learn more by [reading the documentation](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/using-selectors.html)).

### Actions

Test API provides a set of actions that enable you to interact with the webpage.\
Actions are implemented as methods in the test controller object and can be chained.

### Observing page state

TestCafe allows you to observe the page state via:

* Selector used to get direct access to DOM elements
* ClientFunction used to obtain arbitrary data from the client side.

### Assertions

The test controller provides an `expect` function that should check the result of performed actions.

### Hooks

* fixture.beforeEach( fn(t) )
* fixture.afterEach( fn(t) )
* test.before( fn(t) )
* test.after( fn(t) )

```javascript
fixture`Navigation`
  .page`http://localhost:3000`
  .beforeEach( async t => {
    await t.click(homePage.startBtn);
    await postsPage.isPageDisplayed();
  });
```

### Debugging

#### The debug method of TestController

```javascript
async submitForm(title, content) {
  await t
    .typeText(this.inputTitle, title)
    .debug() // the test stops here
    .typeText(this.textAreaField, content)
    .click(this.submitBtn);
}
```

#### Debugging with screenshots on failure

```
testcafe chrome e2e/**/* --screenshots ./screenshots --screenshots-on-fails
```

#### [Debugging with videos](https://devexpress.github.io/testcafe/documentation/reference/command-line-interface.html#--video-basepath)

```
testcafe chrome e2e/**/* --video videos --video-options singleFile=true,failedOnly=true
```

#### <br>