是否可以在 Playwright 规范文件中设置 Angular TestBed？答案

【问题标题】：Is it possible to set up a Angular TestBed inside of a Playwright spec file?是否可以在 Playwright 规范文件中设置 Angular TestBed？
【发布时间】：2021-07-10 22:43:22
【问题描述】：

所以我有一个奇怪的测试用例，我试图将 Playwright.js 和 Angular 的 TestBed 一起使用。

我需要在浏览器中更改组件实例，以便编写两个不同的断言。

一个用于检查 DOM 元素是否在浏览器处于特定高度时不可见，另一个用于验证它是否存在。

但是 DOM 元素是由 Angular 控制的。所以我希望使用 TestBed 像普通的 Jasmine 测试一样创建组件的 Fixture，然后以这种方式打开和关闭按钮。

这个文件然后由 Playwright.js 使用 Angular 中的 Protractor 配置运行。 Playwright 工作正常并运行简单的 DOM 测试，但我需要它来测试组件更改。 jasmine-playwright.e2e-spec

这是我目前所拥有的，你可能猜到它不起作用。

import { chromium, Browser, Page } from 'playwright';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement } from '@angular/core';

import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

import { AppComponent } from '../../src/app/app.component';

fdescribe('Testing an Angular Component in Playwright app', () => {

  let browser: Browser;
  let page: Page;

  let component: AppComponent
  let fixture: ComponentFixture<AppComponent>;
  let el: DebugElement;

  beforeAll(async () => {
    browser = await chromium.launch({ headless: false, slowMo: 2000 });
    page = await browser.newPage();
    await page.goto('http://localhost:4200');

    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(BrowserDynamicTestingModule,
      platformBrowserDynamicTesting());

    TestBed.configureTestingModule({
      declarations:[AppComponent],
      imports:[],
      providers: []
    })
      .compileComponents()
      .then(()=>{
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        el = fixture.debugElement;
        fixture.detectChanges();
      })

  });

  it('Jasmine Should not be the correct page title', async () => {
    expect(await page.title()).not.toBe('This  doesn't work');
  });


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

现在我得到的只是

- 失败：无法解析 ApplicationModule 的所有参数：(?)。

这不是很有帮助。

【问题讨论】：

TestBed + playwright 方法有什么运气吗？
无。一段时间后我放弃了。我觉得不可能

标签： angular jasmine playwright

【解决方案1】：

看了我这边的问题后，我意识到 playwright 是在节点（服务器）上运行的库，而 TestBed 是直接在浏览器（客户端）中运行的 API。因此，您不应将它们混合在一个函数中。

这意味着对于单元测试场景，我应该继续使用纯粹在浏览器中运行且不依赖量角器或硒的 Karma。

【讨论】：