Codeceptjs 选择器：如何选择“电子邮件”输入字段？答案

【问题标题】：Codeceptjs selectors: How to select the "email" input field?Codeceptjs 选择器：如何选择“电子邮件”输入字段？
【发布时间】：2017-11-29 11:35:00
【问题描述】：

我真的需要语法方面的帮助。

我有输入字段：

<input class="email__field ng-pristine ng-empty ng-valid-email ng-invalid ng-invalid-required ng-touched" name="email" ng-model="authForm.email" ng-keypress="keypress($event);" ng-disabled="false" focused="true" required="" style="" type="email">

根据文档：http://devdocs.io/codeceptjs/helpers/seleniumwebdriver/index#fillfield

I.fillField('email', 'hello@world.com');

应该按名称定位元素。但测试失败并显示错误消息： "未按名称找到字段电子邮件|文本|CSS|XPath"

是语法错误还是网络驱动程序有问题？例如。上一个命令/步骤是：

I.amOnPage(some url here);

它正在工作，所以我认为 webdriver 应该没问题。

【问题讨论】：

标签： syntax codeceptjs

【解决方案1】：

您使用的语法是正确的。定位元素可能有问题。

尝试通过以下方式调试问题，

1) 在 "I.amOnPage" 和 "I.fillField" 之间添加等待 --> I.wait(2) 秒
2) 尝试点击元素'email'然后fillField I.click('//input[@name='email']');I.fillField('email');
3）尝试为fillField传递一个xpath，可能有另一个元素被禁用。例如：I.fillField('//input[@ng-model="authForm.email"][@name='email']')

另外请确保元素不在 iframe 内，如果是则意味着您需要先切换到框架然后执行操作

【讨论】：

谢谢。这又是一个等待问题。
您能告诉我该电子邮件字段的有效 CSS 选择器吗？作为 xpath 之一，我使用： I.fillField('//input[@name="email"]','hello@world.com');它正在工作，但我无法理解 CSS 选择器。例如： document.querySelector('input[type="email"]') 返回所需的元素，但令我感到困惑的是，任何基于该元素的 CSS 选择器都失败了。
试试 executeScript 作为 I.executeScript("document.querySelector(\"input[name='email']\").setAttribute('value', 'hello@world.com');" );
结果：无效元素状态：无法在“文档”上执行“querySelector”：“input[name='email'‌]”不是有效的选择器。但我的意思和想知道的是：例如在Java中我会使用类似的东西： driver.findElement(By.cssSelector('input[type="email"]')); 'input[type="email"]' 正是我用 document.querySelector() 检查的选择器。所以我的问题是：有没有办法通过 Codeceptjs 以一种漂亮的方式使用字符串 'input[type="email"]'？