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
fixture `Getting Started`
.page `https://blog.xebia.fr`;
test('My first test', async t => {
// Test code
});
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).
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) )
fixture`Navigation`
.page`http://localhost:3000`
.beforeEach( async t => {
await t.click(homePage.startBtn);
await postsPage.isPageDisplayed();
});
Debugging
The debug method of TestController
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
testcafe chrome e2e/**/* --video videos --video-options singleFile=true,failedOnly=true
Last updated
Was this helpful?