Carlos Cifuentes
AngularJS → Angular reference

Protractor in modern Angular

Protractor has reached end of life. Its end-to-end tests are rewritten in Playwright or Cypress, which do not depend on the framework of the page.

Before · AngularJS
describe('login', function () {
  it('signs in', function () {
    browser.get('/login');
    element(by.model('vm.email')).sendKeys('ana@example.com');
    element(by.model('vm.password')).sendKeys('secret');
    element(by.buttonText('Sign in')).click();
    expect(element(by.binding('vm.user.name')).getText()).toEqual('Ana');
  });
});
After · Angular
import { test, expect } from '@playwright/test';

test('signs in', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ana@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page.getByTestId('user-name')).toHaveText('Ana');
});

What changes

  • by.model, by.binding and by.repeater relied on AngularJS internals; the new tests locate elements by role, label, text or test id.
  • The automatic wait for AngularJS is replaced by locators and assertions that retry until the element is ready.
  • Tests are plain async/await code, without the Protractor control flow.

Migration tip. Rewrite the critical flows before you migrate the screens. Because the new locators do not depend on the framework, the same suite runs against the AngularJS screen and its Angular replacement, and it becomes the safety net for the migration.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn