playwright
playwright copied to clipboard
microsoft
[Feature] Support for Component Tests in Angular apps
Please support Component Testing for Angular.
In v1.22.0, there is experimental support for react, vue, and svelte Component Tests
https://github.com/microsoft/playwright/releases/tag/v1.22.0
@jhanink please provide how your see API in ideal world for component testing angular app.
@mxschmitt @jhanink I thing is a good idea to support angular applications. But let me put some notes.
React/vue has a simple API (aka ReactDOM.render function) to put the component in your DOM node. Angular applications has not such API. The minimal repro:
index.html
<body>
<app-root></app-root>
// angular runtime
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
// compiled app
<script src="main.js" type="module"></script>
</body>
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@Component({
selector: 'app-root',
template:'<span>{{ title }} app is running!</span>'
})
export class AppComponent {
title = 'my-app';
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule)
Does Angular v14 help resolve and make this simpler? With standalone components coming I think this could be similar to the React/Vue/Svelte examples.
RFC from Anular for context.
Does Angular v14 help resolve and make this simpler? With standalone components coming I think this could be similar to the React/Vue/Svelte examples.
RFC from Anular for context.
About the new setup with standalone component angular docs
That will be great. In order for this to work with traditional component (read: not standalone), you will need to do something like Testbed which is the compilation context for an angular component. Only that will give you a renderable component. You might want to look at storybook angular library, which is dealing with the same thing basically (render a single component in isolation).
Playwright is so amazing that I want to replace all our e2e tests, including tests in libraries, with Playwright. Would be amazing to have Angular components support, at least standalone components.
Support for Angular would be great! Cypress has proven it is technically possible, even without standalone components, if I'm not mistaken :).
Another obstacle is that Playwright transpiles the components with Vite and Angular has no Vite support as far as i know.
Just released Angular support here: https://github.com/jscutlery/devkit/tree/main/packages/playwright-ct-angular
but you'll have to follow the Versatile Angular Style: standalone, inject(), inline templates & styles.
While the current implementation only works with Versatile Angular Style. Using this angular vite plugin might help supporting most use cases. https://github.com/analogjs/analog/tree/main/packages/vite-plugin-angular
I also opened an issue to merge efforts.
https://github.com/microsoft/playwright/issues/19380
@brandonroberts May I ask if you think it is realistic/desirable to use your Vite plugin for Angular? Saw you said something about it earlier in: https://github.com/analogjs/analog/issues/20#issuecomment-1221413098 😄
@sand4rt yes, it's possible to use it. I've tested a working solution with Playwright Component Tests and Angular using the Vite plugin. Supports inline/external styles and constructor DI
Awesome! Do you still have the solution? Perhaps it can help with the integration if the Playwright team decides to use it?
I don't have the solution I worked on before, but I remember the steps to get it working. I'll recreate it and push up a repo and we can decide what to do from there
Here's the repo! https://github.com/brandonroberts/analog-playwright-component-tests
Of course it will need more work to override providers and such, but its a start
Hi all, i'm also building a library for testing Angular components with Playwright due to the absence of @yjaaidi. It is still work in progress: https://github.com/sand4rt/playwright-ct-angular.
edit: It is ready for use. If you have any feedback, let me know. @brandon thanks for the repo, managed to integrate your Vite plugin!
Hi all, i'm also building a library for testing Angular components with Playwright due to the absence of @yjaaidi.
@sand4rt Why have you not opened issues against our repository? We could have joined the effort instead of splitting the work with multiple community solutions.
@edbzn I worked on it before @yjaaidi released the lib. Tried to collaborate and combine efforts several times without luck see: https://github.com/microsoft/playwright/pull/19395 for example. So then i decided to publish a separate one.
Hi @sand4rt, I was off for a while and catching up now.
As mentioned by @edbzn, we were ok with merging efforts in Playwright, not another library. In addition to this, I am not the only maintainer of @jscutlery/devkit and @edbzn could have helped.
Also, we are sad to see that there is no credit for our work in your library.
Also, we are sad to see that there is no credit for our work in your library.
Which part do you think i should have give credit for? I think that the library i made looks/works nothing like yours right?
Edit: Not sure if the Playwright team is focusing on other things, but im still open to collaborate on official support.
Any news on combining/merging any of the above Angular Component Testing solutions in Playwright?
Hey! Sorry everyone for catching up so late. I just had a quick chat with @sand4rt, and we definitely have to provide official Angular support.
@sand4rt would you be willing to recreate a fresh PR?
Also, I have a couple of suggestions concerning the integration and customization of analog's vite plugin.
@sand4rt @mxschmitt what would be the most efficient approach?
- Start the PR and discuss the details on the PR? (my favorite)
- Discuss the details on @sand4rt's repo?
- Create a playwright-community repo? (that would be temporary and act as an incubator because Angular plugin deserves its place next to its fellow libs/fmwks)
Hey! Sorry everyone for catching up so late. I just had a quick chat with @sand4rt, and we definitely have to provide official Angular support.
@sand4rt would you be willing to recreate a fresh PR?
Also, I have a couple of suggestions concerning the integration and customization of analog's vite plugin.
@sand4rt @mxschmitt what would be the most efficient approach?
- Start the PR and discuss the details on the PR? (my favorite)
- Discuss the details on @sand4rt's repo?
- Create a playwright-community repo? (that would be temporary and act as an incubator because Angular plugin deserves its place next to its fellow libs/fmwks)
Would like to create a PR, but it is up to the Playwright team. It's also an option to discuss it at my repo or create a community repo, all fine with me :)
I think official Vite support is coming to Angular 17 next month.
@Tallyb was this discussed somewhere? Official support would be great.
I think official Vite support is coming to Angular 17 next month.
Yes @Tallyb! Actually, you can already opt-in to vite since v16 by replacing @angular-devkit/build-angular:browser with @angular-devkit/build-angular:browser-esbuild
That said, this doesn't change things concerning the integration with Playwright etc... as Angular will not expose a vite plugin yet. But Brandon is here to bridge the gap.