javascript - Angular2+ e2e 测试 - 无法使用 by.id

Question

我是 Angular2 的新手，还没有开发要测试的 Angular 组件。但是，我应该编写一些 UI (e2e) 测试，但我什至无法在输入字段中输入文本。

我的问题是 element(by.id('用户名')).sendKeys('测试')不管用。 (与 Button 元素等相同)

我确信这只是一件小事，但我无法找出它是什么。

我有以下配置:

• Protractor :5.1.2
• Chrome 驱动程序:58.0.3029.110
• 操作系统:Windows NT 6.1.7601 SP1 x86_64

规范文件:

import { LoginPage } from './login.po';

describe('login tests', function() {
  let page: LoginPage;

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

  it('Demo', () => {
    page.navigateTo();
    page.getUsernameInput().sendKeys('test');
  });
});

页面对象文件:

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

export class LoginPage {
  navigateTo() {
    return browser.get('/login');
  }

  getParagraphText() {
    return element(by.class('app-root h1')).getText();
  }

  getUsernameInput() {
    return element(by.id('username'));
  }
}

HTML 模板:

....
<div>
  <input
    id="username" 
    name="username" 
    ngModel 
    type="text" 
    placeholder="{{something}}" 
    autocomplete="off" 
    class="input-text" 
    required>
</div>
...

Protractor 配置

var SpecReporter = require('jasmine-spec-reporter');

exports.config = {
    allScriptsTimeout: 120000,
    getPageTimeout: 120000,
    specs: [
      './e2e/**/*.e2e-spec.ts'
    ],
    capabilities: {
      'browserName': 'chrome'
    },
    directConnect: true,
    seleniumAddress: 'http://localhost:4444/wd/hub',
    baseUrl: 'http://localhost:8001',
    framework: 'jasmine',
    jasmineNodeOpts: {
      showColors: true,
      defaultTimeoutInterval: 30000,
      print: function() {}
    },
    useAllAngular2AppRoots: true,
    beforeLaunch: function() {
      require('ts-node').register({
        project: 'e2e'
      });
    },
    onPrepare: function() {
      jasmine.getEnv().addReporter(new SpecReporter());
    }
};

非常感谢任何帮助。

编辑:对于我的情况，所有解决方案都不起作用。我最终使用 browser.driver.findElement(by.id('username')); 而不是 element(by.id('username')); 这是不满意，因为我仍然不明白为什么这不起作用。如果有人能给我提示或解释，我将不胜感激。

Answer 1

我认为你的问题是时机。

如果你这样做会发生什么:

it('Demo', () => {
    // wait for page to change to /login
    return page.navigateTo().then(() => {
        // then look for user input and write 'test' 
        return page.getUsernameInput().sendKeys('test');
    });    
});

编辑:

对我来说听起来很奇怪，browser.driver.findElement(by.id('username'))自element(by.id('username'))开始工作应该是等价的。

我使用辅助类来进行很多浏览器交互，也许值得一试。

我用于查找元素和发送击键的片段:

public static async getElement(locator: By | Function, waitMs?: number): Promise<ElementFinder | any> {

    await BrowserHelper.waitForVisibilityOf(locator, waitMs | 1000);

    return element(locator);
}

public static sendKeys(locator: By | Function, keys: string, clear?: boolean, waitMs?: number): Promise<void> {
    return BrowserHelper.getElement(locator, waitMs).then((element: ElementFinder) => {
        if (!clear) {
            return element;
        }

        return element.clear().then(() => element);
    }).then((element: ElementFinder) => {
        return element.sendKeys(keys)
    });
}

public static async waitForVisibilityOf(locator: By | Function, waitMs?: number): Promise<any> {
    await browser.wait(EC.presenceOf(element(locator)), waitMs || 5000).then(() => {
        // visible
    }, (error) => {
        console.error('timeout at waitForVisibilityOf', locator, error);
    });
}