The TestCafe team no longer maintains the testcafe-angular-selectors repository. If you want to take over the project, we'll be happy to hand it over. To contact the team, create a new GitHub issue.

This plugin provides Selector extensions that make it easier to test Angular applications with TestCafe. These extensions allow you to create a Selector to find elements on the page in a way that is native to Angular applications.

npm install testcafe-angular-selectors

This module includes separate helpers for Angular and AngularJS applications.

See the following topics for more details:

• Angular Selector extentions
• AngularJS Selector extentions

For AngularJS applications, you need to use AngularJSSelector that contains a set of static methods to search by the specified bindings (byModel, byBinding and etc.).

import { AngularJSSelector } from 'testcafe-angular-selectors';
...
const newTodoItem = AngularJSSelector.byModel('newTodo');

For Angular applications, this module provides the capability to select an HTML element by an Angular's component selector or nested component selectors. You can find more information about Angular's component selector in the angular.io documentation topic. Also, this module provides the waitForAngular helper method. Use it to wait until Angular's component tree is loaded.

import { AngularSelector, waitForAngular } from 'testcafe-angular-selectors';
fixture `App tests`
    .page('https://angular-app-url')
    .beforeEach(async () => {
        await waitForAngular();
    });
test('test', async t => {
    const firstListItem = AngularSelector('list list-item');
});