[Feature] Provide integration with Angular CLI

[asterium]

Hi Is it possible to add integration of Playwright with Angular CLI, so that playwright tests could be run as a part of ng e2e command?

Given Protractor is deprecated at the end of 2022, there are a lot of teams out there looking for a better alternative. The ability to integrate the testing tool into Angular build process could be one of the decisive factors for them.

Available integrations from Cypress and Webdriver.io could be used as a reference.

[pavelfeldman]

@pkozlowski-opensource ^^

[pkozlowski-opensource]

@asterium I've started to discuss the idea of such integration (in practical terms - a CLI schematic) with the Playwright team just this week :-) Stay tuned, we should have a good story here!

[asterium]

@pkozlowski-opensource, sorry for bugging you, but are there any updates on the matter?

[pkozlowski-opensource]

Yep! We are close to finishing a schematic that adds Playwright support for Angular CLI project. It should have integration level comparable to the one with Protractor (ex. running tests with the ng e2e command).

Stay tuned!

[Lusey77]

Any movement on this, my team is also adopting playwright, however, integrating with Angular CLI has been a pain thus far. Thanks for your work on this!

[doggy8088]

@pkozlowski-opensource Are you going to release a beta for this soon? We are ready to be a tester. 😊

I think @playwright/schematics is a good name for this package.

ng add @playwright/schematics

I'll be glad to help send PR to Angular CLI repo. So that Playwright will be a built-in example.

[Abildtoft]

I'm also very interested in this - any way to be of help?

[d-koppenhagen]

same here, I would be happy to beta-test this.

[camsteffen]

Does anyone have a workaround for a command to serve the app and run e2e tests?

[liamdocherty10]

@camsteffen we use https://www.npmjs.com/package/start-server-and-test e.g.

"e2e": "start-server-and-test start:e2e http://localhost:4200 e2e:run",
"e2e:install": "playwright install chromium --with-deps",
"e2e:run": "playwright test --config e2e/playwright.config.ts",
"start:e2e": "ng serve",

[camsteffen]

I ended up using the webServer option.

[robertIsaac]

same here, I would be happy to beta-test this.

+1

[randallmeeker]

We are using http-server when running in CI

playwright.config.ts

const runsOnCI = process.env.RUNS_ON_CI === "yes";
const angularConfig = require("./angular.json");

    webServer: runsOnCI
        ? {
              command: `http-server -p 4800 --proxy "http://localhost:4800?" ./dist/${angularConfig.defaultProject}`,
              port: 4800,
          }
        : null,

[Ibrizic]

Hiya everyone, any updates on this? 👼

[jfgreffier]

Hi @pkozlowski-opensource I'm sorry it couldn't be completed. Do you have by any chances a repo with the work that was done so far ?

[littlemin77]

Is there any update on this feature? I've had to break the ng nx affected:e2e functionality when I converted my team's Protractor tests to Playwright so now ALL the tests run instead of just the ones for the app where code was changed. Without an Angular builder for playwright I'm pretty stuck.

[selangley-wa]

Playwright looks like it's missing out in this comparison with other testing frameworks that have implemented a migration schematic for Protractor. https://blog.angular.io/protractor-deprecation-update-august-2023-2beac7402ce0

[selangley-wa]

And here is the source for Puppeteer's angular schematic: https://github.com/puppeteer/puppeteer/tree/main/packages/ng-schematics

[jfgreffier]

Hi ! I've created an Angular schematics for Playwright, it's still new but functional. It adds Playwright Test to your Angular project, can install browsers, and helps you to generate your firsts end-to-end tests. https://www.npmjs.com/package/playwright-ng-schematics

[jfgreffier]

Playwright is now available as e2e choice in Angular CLI. See https://angular.dev/tools/cli/end-to-end

This issue can now be closed, thanks @Skn0tt