Playwright

app-playwright.e2e-spec-1.ts

import { chromium, Browser, Page } from 'playwright';

describe('Angular app homepage', () => {
  let browser: Browser;
  let page: Page;

  beforeAll(async () => {
    browser = await chromium.launch({ headless: false });
    page = await browser.newPage();
  });

  it('Should display the correct page title', async () => {
    await page.goto('http://localhost:4200');
    expect(await page.title()).toBe('MyAngular9AppPlaywright');
  });

  afterAll(async () => {
    await browser.close();
  });
});

app-playwright.e2e-spec-2.ts

it('should display welcome message', async () => {
    await page.goto('http://localhost:4200');
    const titleBannerContents = await page.$eval(
      'app-root .content span',
      (el: HTMLElement) => el.innerText
    );
    expect(titleBannerContents).toBe(
      'my-angular9-app-playwright app is running!'
    );
  });

app-playwright.e2e-spec-3.ts

browser = await chromium.launch({ headless: false, slowMo: 100 });

app-playwright.e2e-spec-4.ts

it('should display the full link on mobile', async () => {
    await page.goto('http://localhost:4200');
    const checked = await page.click('#unclickable_link');
    console.log(checked);
});

app-playwright.e2e-spec-5.ts

beforeAll(async () => {
    browser = await chromium.launch({ headless: false });
    //With Galaxy S5 The third test will fail
    const galaxyS5 = devices['Galaxy S5'];
    const context = await browser.newContext({
      ...galaxyS5,
    });
    page = await context.newPage();
  });

app.component.html

<!-- Strangely styled link -->
  <div style="width: 400px; margin-top: 16px">
    <a href="http://www.google.com" id="unclickable_link">OK</a>
  </div>

protractor.conf-1.js

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*playwright.e2e-spec.ts'
  ],

protractor.conf-2.js

capabilities: {
    chromeOptions: {
      args: [ "--headless" ] //So we only display Playwright screens
    },
    browserName: 'chrome'
  },