npm install --save-dev testcafe

// tests/checkout.test.js
import { Selector } from 'testcafe';

fixture('Checkout flow').page('http://localhost:3000');

test('completes checkout', async (t) => {
  await t
    .typeText('[data-testid=email]', 'user@example.com')
    .typeText('[data-testid=password]', 'pwd')
    .click('button[type=submit]');

  await t.expect(Selector('h1').withText('Welcome').exists).ok();

  await t
    .navigateTo('/products/BOOK-001')
    .click('[data-testid=add-to-cart]');

  await t.expect(Selector('[data-testid=cart-count]').textContent).eql('1');
});

// Basic
const heading = Selector('h1');

// CSS
const button = Selector('button[type=submit]');

// By text
const submitButton = Selector('button').withText('Submit');

// By attribute
const cartCount = Selector('[data-testid=cart-count]');

// Chained
const linkInsideHeader = Selector('header').find('a').withText('Sign in');

// With state (visible, focused, etc.)
const visibleError = Selector('.error').filterVisible();

import { Role } from 'testcafe';

const adminUser = Role('http://localhost:3000/login', async t => {
  await t
    .typeText('[data-testid=email]', 'admin@example.com')
    .typeText('[data-testid=password]', 'admin-pwd')
    .click('button[type=submit]');
});

const regularUser = Role('http://localhost:3000/login', async t => {
  await t
    .typeText('[data-testid=email]', 'user@example.com')
    .typeText('[data-testid=password]', 'user-pwd')
    .click('button[type=submit]');
});

test('admin sees admin panel', async t => {
  await t.useRole(adminUser).expect(Selector('a').withText('Admin').exists).ok();
});

test('regular user does not see admin panel', async t => {
  await t.useRole(regularUser).expect(Selector('a').withText('Admin').exists).notOk();
});

# All tests, default browser (Chrome)
npx testcafe chrome tests/

# Multiple browsers
npx testcafe chrome,firefox tests/

# Headless
npx testcafe chrome:headless tests/

# Specific test
npx testcafe chrome tests/checkout.test.js

# JUnit XML (CI-friendly)
npx testcafe chrome:headless tests/ --reporter junit:reports/junit.xml

# Multiple reporters
npx testcafe chrome:headless tests/ --reporter spec,junit:reports/junit.xml

import { Selector, RequestMock } from 'testcafe';

const mock = RequestMock()
  .onRequestTo('https://api.example.com/orders/123')
  .respond({ orderId: 123, status: 'shipped' }, 200, {
    'access-control-allow-origin': '*',
  });

fixture('Order page').page('http://localhost:3000').requestHooks(mock);

test('shows shipped status', async (t) => {
  await t.expect(Selector('[data-testid=status]').textContent).eql('shipped');
});

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
      - uses: actions/setup-node@v4
        with: { node-version: '22' }
      - run: npm ci
      - run: npx testcafe chrome:headless tests/ --reporter junit:reports/junit.xml
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: testcafe-reports
          path: reports/