Protractor Alternatives 2025: Modern Angular Testing Tools Comparison

// playwright.config.ts
import { defineConfig } from '@playwright/test' (as discussed in [Cypress Deep Dive: Architecture, Debugging, and Network Stubbing Mastery](/blog/cypress-deep-dive));

export default defineConfig({
  testDir: './e2e',
  use: {
    baseURL: 'http://localhost:4200',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure'
  },
  webServer: {
    command: 'npm run start',
    port: 4200,
    reuseExistingServer: !process.env.CI
  }
});

// e2e/login.spec.ts
import { test, expect } from '@playwright/test' (as discussed in [Selenium WebDriver in 2025: Still Relevant?](/blog/selenium-webdriver-2025-still-relevant));

test.describe('Login Component', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
    await page.waitForLoadState('networkidle');
  });

  test('should login with valid credentials', async ({ page }) => {
    await page.fill('[formControlName="email"]', 'user@example.com');
    await page.fill('[formControlName="password"]', 'password123');
    await page.click('button[type="submit"]');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.locator('.welcome-message')).toBeVisible();
  });

  test('should show validation errors', async ({ page }) => {
    await page.click('button[type="submit"]');

    await expect(page.locator('mat-error')).toHaveCount(2);
    await expect(page.locator('mat-error').first()).toContainText('Email is required');
  });
});

// cypress.config.ts
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:4200',
    supportFile: 'cypress/support/e2e.ts'
  },
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack'
    },
    specPattern: '**/*.cy.ts'
  }
});

// cypress/e2e/products.cy.ts
describe('Product Catalog', () => {
  beforeEach(() => {
    cy.visit('/products');
    cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('getProducts');
  });

  it('should filter products by category', () => {
    cy.wait('@getProducts');

    cy.get('[data-cy=category-filter]').select('Electronics');
    cy.get('[data-cy=product-card]').should('have.length', 5);
    cy.get('[data-cy=product-card]').first()
      .should('contain', 'Laptop');
  });

  it('should add product to cart', () => {
    cy.get('[data-cy=add-to-cart]').first().click();
    cy.get('[data-cy=cart-count]').should('contain', '1');
    cy.get('[data-cy=cart-total]').should('contain', '$999.99');
  });
});

// wdio.conf.js
exports.config = {
  specs: ['./test/specs/**/*.ts'],
  framework: 'mocha',
  capabilities: [{
    browserName: 'chrome',
    'goog:chromeOptions': {
      args: ['--headless', '--disable-gpu']
    }
  }],

  baseUrl: 'http://localhost:4200',

  // Angular-specific configuration
  sync: false,
  waitforTimeout: 10000,
  connectionRetryTimeout: 120000,
  connectionRetryCount: 3,

  beforeSession: function() {
    // Configure Angular synchronization
    browser.setTimeout({ 'script': 60000 });
  },

  before: function() {
    // Wait for Angular to be ready
    browser.executeAsync((done) => {
      if (window.getAllAngularTestabilities) {
        window.getAllAngularTestabilities().forEach(testability => {
          testability.whenStable(done);
        });
      } else {
        done();
      }
    });
  }
};

// test/specs/checkout.spec.ts
describe('Checkout Flow', () => {
  it('should complete purchase', async () => {
    await browser.url('/checkout');

    // Wait for Angular to be stable
    await browser.waitUntil(async () => {
      return await browser.executeAsync((done) => {
        const testability = window.getAllAngularTestabilities()[0];
        testability.whenStable(() => done(true));
      });
    });

    // Fill form
    await $('[formControlName="firstName"]').setValue('John');
    await $('[formControlName="lastName"]').setValue('Doe');
    await $('[formControlName="email"]').setValue('john@example.com');

    // Submit
    await $('button[type="submit"]').click();

    // Verify
    await expect($('.confirmation-message')).toBeDisplayed();
    await expect($('.order-number')).toHaveTextContaining('ORDER-');
  });
});

// Before (Protractor)
import { browser, element, by } from 'protractor';

describe('Login', () => {
  it('should login', async () => {
    await browser.get('/login');
    await element(by.model('username')).sendKeys('user@example.com');
    await element(by.model('password')).sendKeys('pass123');
    await element(by.buttonText('Login')).click();
    expect(await browser.getCurrentUrl()).toContain('/dashboard');
  });
});

// After (Playwright)
import { test, expect } from '@playwright/test';

test.describe('Login', () => {
  test('should login', async ({ page }) => {
    await page.goto('/login');
    await page.fill('[ng-model="username"]', 'user@example.com');
    await page.fill('[ng-model="password"]', 'pass123');
    await page.click('button:has-text("Login")');
    await expect(page).toHaveURL(/dashboard/);
  });
});

// Before (Protractor)
element(by.css('[data-test="add-to-cart"]')).click();
expect(element(by.css('.cart-count')).getText()).toEqual('1');

// After (Cypress)
cy.get('[data-test="add-to-cart"]').click();
cy.get('.cart-count').should('have.text', '1');

# Install chosen framework
npm install --save-dev @playwright/test

# Keep Protractor temporarily
# npm uninstall protractor (not yet)

# Create new test directory
mkdir e2e-playwright

// package.json
{
  "scripts": {
    "test:e2e:old": "protractor conf.js",
    "test:e2e:new": "playwright test",
    "test:e2e:all": "npm run test:e2e:old && npm run test:e2e:new"
  }
}

// Migration priority order:
// 1. Smoke tests (critical paths)
// 2. Regression tests (stable features)
// 3. Edge cases
// 4. Visual/accessibility tests

# Remove Protractor
npm uninstall protractor

# Update CI/CD
# Replace protractor commands with new framework

# Archive old tests
git mv e2e e2e-archived