[Feature] Support for Component Tests in Angular apps #14153

jhanink · 2022-05-13T21:54:31Z

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

vitalics · 2022-05-14T04:44:39Z

@jhanink please provide how your see API in ideal world for component testing angular app.

vitalics · 2022-05-14T06:54:27Z

@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)

tytusplanck-8451 · 2022-05-19T14:28:26Z

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.

ExFlo · 2022-06-30T11:06:54Z

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

Tallyb · 2022-09-06T10:53:43Z

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).

e-oz · 2022-09-06T14:00:28Z

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.

Waterstraal · 2022-09-19T07:57:58Z

Support for Angular would be great! Cypress has proven it is technically possible, even without standalone components, if I'm not mistaken :).

sand4rt · 2022-11-15T21:29:10Z

Another obstacle is that Playwright transpiles the components with Vite and Angular has no Vite support as far as i know.

yjaaidi · 2022-12-07T16:21:43Z

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.

e-oz · 2022-12-07T23:39:20Z

I hope PW team will not postpone this feature because of previous comment :)

yjaaidi · 2022-12-09T13:35:23Z

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

yjaaidi · 2022-12-09T13:35:56Z

I also opened an issue to merge efforts.

#19380

sand4rt · 2022-12-20T16:49:54Z

@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: analogjs/analog#20 (comment) 😄

brandonroberts · 2022-12-20T17:24:54Z

@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

sand4rt · 2022-12-20T17:52:44Z

Awesome! Do you still have the solution? Perhaps it can help with the integration if the Playwright team decides to use it?

brandonroberts · 2022-12-20T22:16:59Z

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

brandonroberts · 2022-12-22T21:58:10Z

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

sand4rt · 2023-03-29T14:03:46Z

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!

edbzn · 2023-04-22T10:25:18Z

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.

sand4rt · 2023-04-22T10:42:12Z

@edbzn I worked on it before @yjaaidi released the lib. Tried to collaborate and combine efforts several times without luck see: #19395 for example. So then i decided to publish a separate one.

yjaaidi · 2023-04-22T10:49:24Z

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.

sand4rt · 2023-04-22T11:30:09Z

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.

the-ult · 2023-06-20T12:05:52Z

Any news on combining/merging any of the above Angular Component Testing solutions in Playwright?

brandonroberts · 2023-10-24T13:27:08Z

I think official Vite support is coming to Angular 17 next month.

@Tallyb was this discussed somewhere? Official support would be great.

yjaaidi · 2023-10-24T13:31:01Z

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.

yjaaidi · 2023-10-24T13:31:18Z

@brandonroberts I think that @Tallyb meant that Angular 17 has official vite support.

brandonroberts · 2023-10-24T13:38:44Z

@brandonroberts I think that @Tallyb meant that Angular 17 has official vite support.

Ahh, ok

mxschmitt · 2023-10-24T17:05:08Z

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 :)

We discussed it in our team meeting. We are interested in landing the Angular support inside the Playwright repository if its like the other frameworks covered with tests/does not depend on a lot of external dependencies. Thanks!

yjaaidi · 2023-10-24T18:06:50Z

Perfect! Thank you @mxschmitt!
@sand4rt do you mind creating the PR based on @sand4rt/playwright-ct-angular then we can discuss the details directly on the PR? This way the decisions will be easier to track. What do you think?

Thank you in advance.

sand4rt · 2023-10-24T18:13:09Z

Awesome! The repo i currently have is like the other frameworks, covered with tests and no external dependencies other than Angular and @brandonroberts's Vite plugin. Will create an PR ASP so we can attack it from multiple angles:)

sand4rt · 2023-10-24T21:02:42Z

Hi all, see the PR above. Curious to hear what you all think! I'll go through it again as well later on this week.

yjaaidi · 2023-10-25T20:11:36Z

Cool! Thx @sand4rt!

kddsultan · 2023-11-06T15:07:34Z

I think official Vite support is coming to Angular 17 next month.

How is that support relevant for this discussion/issue? Thanks

R-Bower · 2023-11-21T02:25:35Z

I think official Vite support is coming to Angular 17 next month.

How is that support relevant for this discussion/issue? Thanks

https://playwright.dev/docs/test-components#under-the-hood

Playwright is using Vite to create the components bundle and serve it.

muhamedkarajic · 2024-02-14T18:28:53Z

I think official Vite support is coming to Angular 17 next month.

How is that support relevant for this discussion/issue? Thanks

Its cause Playwright is using vite under the hood thats why Angular is not able to run with it.

muhamedkarajic · 2024-02-14T18:29:11Z

Any update on this, I would be really interested to give it a try in the production? Angular 17 shipped with official esmodule builder, that might help push this issue forward.

Waterstraal · 2024-03-11T13:48:19Z

@yjaaidi @pavelfeldman @mxschmitt @sand4rt Kindly requesting an update on this issue. Is this still expected to land somewhere this year?

Thank you!

yjaaidi · 2024-03-11T14:18:41Z

Hey @Waterstraal! we are working on that 😊

SerkanSipahi · 2024-04-16T05:11:34Z

we are working on that 😊

@yjaaidi this is awesome, thanks. What is the current status?

yjaaidi · 2024-04-16T07:04:49Z

Everything's ready here sand4rt#5
We're just waiting for any feedback from @sand4rt and eventually the merge and the review by the team.

zargham-leanix · 2024-04-17T13:06:46Z

@yjaaidi is there any way to try this out locally ?

yjaaidi · 2024-05-02T19:55:04Z

Hey @zargham-leanix, if you just want to play around with it you can clone this https://github.com/yjaaidi/playwright/tree/hello-angular-ct, head to tests/components/ct-angular and run npm test.

Otherwise, you can npm run build && cd packages/playwright-ct-angular && npm link then npm link @playwright/playwright-ct-angular to use it wherever you want.

muhamedkarajic · 2024-05-09T19:30:49Z

Everything's ready here sand4rt#5 We're just waiting for any feedback from @sand4rt and eventually the merge and the review by the team.

OMG. Thank you for this, incredable!

muhamedkarajic · 2024-05-15T22:03:15Z

Hey @zargham-leanix, if you just want to play around with it you can clone this https://github.com/yjaaidi/playwright/tree/hello-angular-ct, head to tests/components/ct-angular and run npm test.

Otherwise, you can cd packages/playwright-ct-angular; npm link then npm link @playwright/playwright-ct-angular to use it wherever you want.

@yjaaidi I am not able to get it working by following those instructions. I get the following error:

Error: Cannot find module '/Users/muhamedkarajic/GitHub/playwright/node_modules/@playwright/experimental-ct-core/lib/program.js'

I am supposed to use @playwright/playwright-ct-angular and install it locally in another repo. What do I have to do else to get it to run, I have tried also installing to local playwright in packages but still no luck.

yjaaidi · 2024-05-21T08:23:18Z

Hi @muhamedkarajic, it seems that the library was not built first.
Try running npm run build. (I just updated my previous comment to add the command, so you didn't miss it 😉)

CosminGramada · 2024-05-21T09:39:12Z

Hi @yjaaidi

Just to confirm, this is still waiting for review, merge and release, correct?

muhamedkarajic · 2024-06-25T08:46:16Z

When will this be finally merged?

muhamedkarajic · 2024-08-04T20:46:17Z

And when will this be finally merged? Asked he again.

tomczakmarcel · 2024-08-05T09:11:15Z

And when will this be finally merged? Asked he again.

+1

idgMaciej · 2024-09-05T08:14:19Z

Hi @muhamedkarajic, it seems that the library was not built first. Try running npm run build. (I just updated my previous comment to add the command, so you didn't miss it 😉)

Hi @yjaaidi
I would like to learn more about component tests with Angular and since official PR stuck for weeks now I wanted to try your solution. Unfortunately I cannot run it. After:

cloning repo
switch to "hello-angular-ct" branch (tests/components/ct-angular is not there on main)
npm install
I have executed npm run build && cd packages/playwright-ct-angular && npm link as you mentioned above from root dir. That was without any issues. But then I cannot run npm link @playwright/playwright-ct-angular because there is no "playwright-ct-angular":

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@playwright%2fplaywright-ct-angular - Not found
'@playwright/playwright-ct-angular@*' is not in this registry.

not sure which step I have missed.
Can you please take a look or point me to some other repo that I can give a shot with component tests before (hopefully) Playwright officially support this?

jhanink · 2024-09-05T19:01:42Z

This has been a fun ride over the past 2.5 years

The good news is - it might be ready to ship soon.
The bad news is - it might not be ready to ship soon.
😜

muhamedkarajic · 2024-10-16T22:11:53Z

Who are we? Angular devs. What do we want?! Playwright component testing built in for Angular! When do we want it? This year, not next!

mxschmitt added feature-components P3-collecting-feedback labels May 13, 2022

sand4rt mentioned this issue Dec 10, 2022

feat(ct): initial angular #19395

Closed

This was referenced Feb 24, 2023

fix: undefined viteServer analogjs/analog#279

Merged

feat(ct): angular component testing #21208

Closed

sand4rt mentioned this issue Apr 22, 2023

[Feature] Make component testing possible for React, Vue etc. #7148

Open

mxschmitt mentioned this issue Oct 23, 2023

[Feature] add official angular component testing support #27753

Closed

sand4rt mentioned this issue Oct 24, 2023

feat(ct): angular component testing #27783

Closed

10 tasks

[Feature] Support for Component Tests in Angular apps #14153

[Feature] Support for Component Tests in Angular apps #14153

Comments

jhanink commented May 13, 2022 • edited Loading

vitalics commented May 14, 2022

vitalics commented May 14, 2022

tytusplanck-8451 commented May 19, 2022

ExFlo commented Jun 30, 2022 • edited Loading

Tallyb commented Sep 6, 2022

e-oz commented Sep 6, 2022

Waterstraal commented Sep 19, 2022

sand4rt commented Nov 15, 2022

yjaaidi commented Dec 7, 2022

e-oz commented Dec 7, 2022

yjaaidi commented Dec 9, 2022

yjaaidi commented Dec 9, 2022 • edited Loading

sand4rt commented Dec 20, 2022 • edited Loading

brandonroberts commented Dec 20, 2022

sand4rt commented Dec 20, 2022 • edited Loading

brandonroberts commented Dec 20, 2022

brandonroberts commented Dec 22, 2022 • edited Loading

sand4rt commented Mar 29, 2023 • edited Loading

edbzn commented Apr 22, 2023

sand4rt commented Apr 22, 2023 • edited Loading

yjaaidi commented Apr 22, 2023 • edited Loading

sand4rt commented Apr 22, 2023 • edited Loading

the-ult commented Jun 20, 2023

brandonroberts commented Oct 24, 2023

yjaaidi commented Oct 24, 2023

yjaaidi commented Oct 24, 2023

brandonroberts commented Oct 24, 2023

mxschmitt commented Oct 24, 2023

yjaaidi commented Oct 24, 2023

sand4rt commented Oct 24, 2023

sand4rt commented Oct 24, 2023

yjaaidi commented Oct 25, 2023

kddsultan commented Nov 6, 2023

R-Bower commented Nov 21, 2023 • edited Loading

muhamedkarajic commented Feb 14, 2024

muhamedkarajic commented Feb 14, 2024 • edited Loading

Waterstraal commented Mar 11, 2024

yjaaidi commented Mar 11, 2024

SerkanSipahi commented Apr 16, 2024

yjaaidi commented Apr 16, 2024

zargham-leanix commented Apr 17, 2024

yjaaidi commented May 2, 2024 • edited Loading

muhamedkarajic commented May 9, 2024 • edited Loading

muhamedkarajic commented May 15, 2024 • edited Loading

yjaaidi commented May 21, 2024

CosminGramada commented May 21, 2024 • edited Loading

muhamedkarajic commented Jun 25, 2024

muhamedkarajic commented Aug 4, 2024

tomczakmarcel commented Aug 5, 2024

idgMaciej commented Sep 5, 2024

jhanink commented Sep 5, 2024

muhamedkarajic commented Oct 16, 2024 • edited Loading

jhanink commented May 13, 2022 •

edited

Loading

ExFlo commented Jun 30, 2022 •

edited

Loading

yjaaidi commented Dec 9, 2022 •

edited

Loading

sand4rt commented Dec 20, 2022 •

edited

Loading

sand4rt commented Dec 20, 2022 •

edited

Loading

brandonroberts commented Dec 22, 2022 •

edited

Loading

sand4rt commented Mar 29, 2023 •

edited

Loading

sand4rt commented Apr 22, 2023 •

edited

Loading

yjaaidi commented Apr 22, 2023 •

edited

Loading

sand4rt commented Apr 22, 2023 •

edited

Loading

R-Bower commented Nov 21, 2023 •

edited

Loading

muhamedkarajic commented Feb 14, 2024 •

edited

Loading

yjaaidi commented May 2, 2024 •

edited

Loading

muhamedkarajic commented May 9, 2024 •

edited

Loading

muhamedkarajic commented May 15, 2024 •

edited

Loading

CosminGramada commented May 21, 2024 •

edited

Loading

muhamedkarajic commented Oct 16, 2024 •

edited

Loading