如何测试 Web 应用程序 UI 的布局是否正确。我可以在 Angular 中使用 Karma/Jasmine 来实现吗？

Question

我的 Angular 6 应用程序使用 CSS 网格。我将不同的组件放置在不同的行和列中。我想编写一个测试用例，在其中我想检查特定组件是否具有特定的行和列值。

例如，假设

<nav-component>

 组件正在 

app-component

 中使用。将 

nav-component

 放置在特定行和列的 css 是

nav-component {
  grid-column: 1 / -1;
  grid-row: 1 / 2;

}

如何测试

nav-component

 是否具有 

grid-column

 1/-1 和 

grid-row

 1/2？

到目前为止，我已经写了

fit('Nav Component should be at the top of the page',()=>{
      const fixture:ComponentFixture<AppComponent> = TestBed.createComponent(AppComponent);
      const appDebugElement:DebugElement = fixture.debugElement; //app-component
      const navChild:DebugElement = appDebugElement.query(By.css('nav-component'))
      console.log('navChild is ',navChild);
      //HERE I WANT TOCHECK THAT NAV HAS A SPECIFIC ROW AND COLUMN VALUE

    });

Answer 1

今天，这可以做到，例如通过 Cypress 通过比较应用程序或单个组件的快照。

有关详细信息，请参阅

https://docs.cypress.io/guides/tooling/visual-testing。