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

Question

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

我的问题是 element(by.id('username')).sendKeys('test') 不管用。 （与 Button 元素等相同）

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

我有以下配置：

• 监考人员：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>
...

量角器配置

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);
    });
}

Answer 2

我相信这是由于您的 getUsernameInput() 方法在这种情况下返回的不是定位器。根据量角器文档，

element() 函数返回一个 ElementFinder 对象。 ElementFinder 知道如何使用作为参数传入的定位器来定位 DOM 元素，但它实际上还没有这样做。在调用操作方法之前，它不会联系浏览器。

你可以试试这个修改后的代码

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

然后使用

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

另外，我不确定您的 getText() 是否会返回文本，因为 getText() 返回一个 Promise，您必须解决该问题。这已经解释了here。