如何用 Protractor 写入 Ionic 的 `ion-input`？

Question

我刚开始使用 Ionic 并查看了文档，我想我会沿着使用内置内容而不是简单 HTML.

的路线

所以我有这个 HTML:

    <ion-item>
      <ion-input type="tel"
                 autofocus="true"
                 placeholder="Phone number"
                 name="phoneNumber"
                 formControlName="phoneNumber"></ion-input>
    </ion-item>

在我的 e2e 测试中，我想写入该字段，所以我尝试这样做：

$('ion-input[name="phoneNumber"]').sendKeys('12345678');

我得到以下堆栈跟踪：

Failed: unknown error: cannot focus element
  (Session info: chrome=68.0.3440.106)
  (Driver info: chromedriver=2.41.578706 (5f725d1b4f0a4acbf5259df887244095596231db),platform=Mac OS X 10.13.6 x86_64)
WebDriverError: unknown error: cannot focus element
  (Session info: chrome=68.0.3440.106)
  (Driver info: chromedriver=2.41.578706 (5f725d1b4f0a4acbf5259df887244095596231db),platform=Mac OS X 10.13.6 x86_64)
    at Object.checkLegacyResponse (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/error.js:546:15)
    at parseHttpResponse (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/http.js:509:13)
    at doSend.then.response (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/http.js:441:30)
    at process._tickCallback (internal/process/next_tick.js:68:7)
From: Task: WebElement.sendKeys()
    at Driver.schedule (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/webdriver.js:807:17)
    at WebElement.schedule_ (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/webdriver.js:2010:25)
    at WebElement.sendKeys (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/webdriver.js:2174:19)
    at actionFn (/home/ba/workspace/ionic-test/node_modules/protractor/built/element.js:89:44)
    at Array.map (<anonymous>)
    at actionResults.getWebElements.then (/home/ba/workspace/ionic-test/node_modules/protractor/built/element.js:461:65)
    at ManagedPromise.invokeCallback_ (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/promise.js:1376:14)
    at TaskQueue.execute_ (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/promise.js:3084:14)
    at TaskQueue.executeNext_ (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/promise.js:3067:27)
    at asyncRun (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/promise.js:2927:27)Error
    at ElementArrayFinder.applyAction_ (/home/ba/workspace/ionic-test/node_modules/protractor/built/element.js:459:27)
    at ElementArrayFinder.(anonymous function).args [as sendKeys] (/home/ba/workspace/ionic-test/node_modules/protractor/built/element.js:91:29)
    at ElementFinder.(anonymous function).args [as sendKeys] (/home/ba/workspace/ionic-test/node_modules/protractor/built/element.js:831:22)
    at UserContext.<anonymous> (/home/ba/workspace/ionic-test/e2e/src/app.e2e-spec.ts:29:28)
    at /home/ba/workspace/ionic-test/node_modules/jasminewd2/index.js:112:25
    at new ManagedPromise (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/promise.js:1077:7)
    at ControlFlow.promise (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/promise.js:2505:12)
    at schedulerExecute (/home/ba/workspace/ionic-test/node_modules/jasminewd2/index.js:95:18)
    at TaskQueue.execute_ (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/promise.js:3084:14)
    at TaskQueue.executeNext_ (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/promise.js:3067:27)
From: Task: Run it("displays the login/signup screen") in control flow
    at UserContext.<anonymous> (/home/ba/workspace/ionic-test/node_modules/jasminewd2/index.js:94:19)
    at attempt (/home/ba/workspace/ionic-test/node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4297:26)
    at QueueRunner.run (/home/ba/workspace/ionic-test/node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4217:20)
    at runNext (/home/ba/workspace/ionic-test/node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4257:20)
    at /home/ba/workspace/ionic-test/node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4264:13
    at /home/ba/workspace/ionic-test/node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4172:9
    at /home/ba/workspace/ionic-test/node_modules/jasminewd2/index.js:64:48
    at ControlFlow.emit (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/events.js:62:21)
    at ControlFlow.shutdown_ (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/promise.js:2674:10)
    at shutdownTask_.MicroTask (/home/ba/workspace/ionic-test/node_modules/selenium-webdriver/lib/promise.js:2599:53)
From asynchronous test: 
Error
    at Suite.<anonymous> (/home/ba/workspace/ionic-test/e2e/src/app.e2e-spec.ts:16:3)
    at addSpecsToSuite (/home/ba/workspace/ionic-test/node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1107:25)
    at Env.describe (/home/ba/workspace/ionic-test/node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1074:7)
    at describe (/home/ba/workspace/ionic-test/node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4399:18)
    at Object.<anonymous> (/home/ba/workspace/ionic-test/e2e/src/app.e2e-spec.ts:5:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Module.m._compile (/home/ba/workspace/ionic-test/node_modules/ts-node/src/index.ts:439:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/home/ba/workspace/ionic-test/node_modules/ts-node/src/index.ts:442:12)

通过查看 HTML，我注意到实际的 input 在阴影 DOM 内，所以我尝试使用以下方法访问它：

element(by.deepCss('input[name="phoneNumber"]')).sendKeys('12345678');

但它给了我：Failed: element not visible 并且它似乎找到了 ion-input 创建的 <input type="hidden" …>。所以我将其更改为搜索 input[type="tel"]，因为它是独一无二的，但没有运气，因为它现在反而说没有任何项目。

阴影 DOM 对我来说是新的，我真的不太了解它，我是否遗漏了一些明显的东西，我应该如何对待它？我附上了 Chrome 检查器视图的屏幕截图。

Answer 1

发布这篇文章后，我发现了 protractor-uisref-locator Protractor 定位器插件，它添加了对另一个 Ionic 组件的支持。所以我接受了它并稍微改变了它并创建了这个可以为我找到我内心输入的定位器。我不知道为什么 by.deepCss 不起作用，很想更好地理解它。

by.addLocator('ionInput', (name, opt_parentElement) => {
  const using = opt_parentElement || document,
        ionInput = using.querySelector('ion-input[name="' + name + '"]');

  if (ionInput) {
    return ionInput.shadowRoot.querySelector('input');
  } else {
    return;
  }
});

和用法：

element(by.ionInput('phoneNumber')).sendKeys('12345678');

Answer 2

在 ionic4 中，你可以这样处理离子输入：

element(by.css('ion-input[name="phoneNumber"] input')).sendKeys('91296754')

如何用 Protractor 写入 Ionic 的 `ion-input`？

How to write into Ionic's `ion-input` with Protractor?

protractor

ionic-framework

ionic4