Angular 2/4 Protractor 调试 e2e 测试

Question

我已经在互联网上搜索了几个小时，试图找到一种能够调试一些 e2e 测试的方法，这些测试是我在 Protractor 上为我的 Angular 2 配方应用程序编写的(测试存在于规范文件 - login.e2e-spec 中) .ts)。

我希望能够在代码中放置断点并单步执行规范文件中的每一行代码。

我的机器上安装了 Node 8.x.x，因此我无法再使用 browser.pause 功能。

有人知道如何通过使用断点一次单步调试每一行来成功调试 Protractor 规范文件吗？

下面是我的测试规范代码:-

import { LoginPage } from './login.po';
import { CommonPage } from '../common/common.po';
import { Navigation } from 'selenium-webdriver';
import { browser } from 'protractor';

describe('angular-two-recipe-app App Login', () => {
  let loginPage: LoginPage;
  let commonPage: CommonPage;

  beforeEach(() => {
    loginPage = new LoginPage();
    commonPage = new CommonPage();
  });

  it('should successfully display the login page', async () => {
    //debugger;
    loginPage.navigateTo();
    browser.debugger();
    browser.manage().window().setSize(1680, 1050);
    expect(loginPage.getUsernameInputBox()).toBeTruthy();
    expect(loginPage.getPasswordInputBox()).toBeTruthy();
    expect(loginPage.getSubmitButton()).toBeTruthy();
    expect(loginPage.getUsernameInputBoxValue()).toBe('');
    expect(loginPage.getPasswordInputBoxValue()).toBe('');
  });  
});

Answer 1

Protractor API 有一个可供您使用的调试器方法。 http://www.protractortest.org/#/api?view=ProtractorBrowser.prototype.debugger

例如:

it('clicks a link', async () => {
    await element(by.css('#link')).click();
    browser.debugger();
    // ...some other action
});