# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://amartyushov.gitbook.io/tech/testing/testcafe.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.