时间戳

首页 > 解决方案 > 使用量角器在不同的路径中以角度截取屏幕截图

javascript - 使用量角器在不同的路径中以角度截取屏幕截图

问题描述

我是使用量角器进行测试的新手，因此为了测试，我必须在 Angular 应用程序中为我的应用程序中的所有不同路线截取屏幕截图。我尝试在一个小的虚拟 Angular 应用程序上执行此操作，因此我克隆了 Tour of heroes它具有仪表板和 Heroes 路由的 repo。我在 app.po.ts 中编写了以下代码：

import { browser, element, by } from 'protractor';

export class BlankPage {
  navigateTo() {
    return browser.get('/heroes');
  }

  getParagraphText() {
    return element(by.tagName('h2')).getText();
  }
}

并在 app.e2e-spec.ts

import { BlankPage } from './app.po';
import {browser,by,element} from 'protractor';
import { protractor } from 'protractor';
import {createWriteStream} from 'fs' ;

describe('blank App', () => {
  let page: BlankPage;

  beforeEach(() => {
    page = new BlankPage();
  });

  it('should display message saying app works', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('My Heroes');
    browser.takeScreenshot().then((png) =>{
      var stream = createWriteStream("heroes.png"); /** change the png file name  */
      stream.write(new Buffer(png, 'base64'));
      stream.end; 
  });
});
});

这个想法是导航到英雄路线并捕获屏幕截图。我得到了屏幕截图，但是
有没有办法可以自动执行所有路线并截取屏幕截图的任务？在我的实际网站中有很多路线

标签： javascriptangulartypescripttestingprotractor

解决方案

我认为对你来说更好的解决方案是添加一些会为你做所有事情的记者，比如在每次测试后或每次失败的测试后截屏等

看看一些记者：

allure-jasmine - 强烈推荐。

量角器-jasmine2-截图-记者

量角器-jasmine2-html-reporter

量角器-html-reporter-2

量角器-html-screenshot-reporter

量角器美丽的记者

但是如果你不想在你的项目中添加任何额外的库，你可以把browser.takeScreenshot()函数放到函数中afterEach，以便在每次测试后截取屏幕截图（it）。

例如：

describe('blank App', () => {
  let page: BlankPage;

  beforeEach(() => {
    page = new BlankPage();
  });
  afterEach(() => 
    browser.takeScreenshot().then((png) =>{
      var stream = createWriteStream("heroes.png"); /** change the png file name  */
    stream.write(new Buffer(png, 'base64'));
    stream.end; 
    });
  });

  it('should display message saying app works', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('My Heroes');

  });
});

推荐阅读