Javascript 角度2+；e2e测试-不能由.id使用
我是Angular2的新手，还没有开发出要测试的角度组件。然而，我应该编写一些UI（e2e）测试，但我甚至不能在输入字段中输入文本 我的问题是Javascript 角度2+；e2e测试-不能由.id使用,javascript,angular,protractor,e2e-testing,Javascript,Angular,Protractor,E2e Testing,我是Angular2的新手，还没有开发出要测试的角度组件。然而，我应该编写一些UI（e2e）测试，但我甚至不能在输入字段中输入文本 我的问题是 元素（by.id（'username'））.sendKeys（'test'） 它不起作用。（与按钮元素等相同） 我确信这只是一件小事，但我无法找出它是什么 我有以下配置： Proctractor：5.1.2 chrome驱动程序：58.0.3029.110 操作系统：Windows NT 6.1.7601 SP1 x86_64 规范文件： impor
元素（by.id（'username'））.sendKeys（'test'）- Proctractor：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'));
}
}
....
<div>
<input
id="username"
name="username"
ngModel
type="text"
placeholder="{{something}}"
autocomplete="off"
class="input-text"
required>
</div>
...
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'));
}
}
....
<div>
<input
id="username"
name="username"
ngModel
type="text"
placeholder="{{something}}"
autocomplete="off"
class="input-text"
required>
</div>
...
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'));
}
}
....
<div>
<input
id="username"
name="username"
ngModel
type="text"
placeholder="{{something}}"
autocomplete="off"
class="input-text"
required>
</div>
...
在我的情况下，所有的解决方案都不起作用。我最终使用了
browser.driver.findElement（by.id（'username'））元素（by.id（'username'）这是不令人满意的，因为我仍然不明白为什么这不起作用。如果有人能给我一个提示或解释，我将不胜感激 我认为这是因为在本例中，您的getUsernameInput（）
方法没有返回定位器。根据量角器文件
函数的作用是：返回一个ElementFinder对象。ElementFinder知道如何使用作为参数传入的定位器定位DOM元素，但实际上它还没有这样做。在调用操作方法之前，它不会与浏览器联系
你可以试试这个修改过的代码
getUsernameInput() {
element(by.id('username')).sendKeys('text');
}
}
然后使用
it('Demo', () => {
page.navigateTo();
page.getUsernameInput();
});
});
另外，我不确定您的getText（）
是否会返回文本，因为getText（）
会返回一个承诺，您必须解决这个问题。这已经解释过了。我认为这是由于在本例中，您的getUsernameInput（）
方法没有返回定位器。根据量角器文件
函数的作用是：返回一个ElementFinder对象。ElementFinder知道如何使用作为参数传入的定位器定位DOM元素，但实际上它还没有这样做。在调用操作方法之前，它不会与浏览器联系
你可以试试这个修改过的代码
getUsernameInput() {
element(by.id('username')).sendKeys('text');
}
}
然后使用
it('Demo', () => {
page.navigateTo();
page.getUsernameInput();
});
});
另外，我不确定您的getText（）
是否会返回文本，因为getText（）
会返回一个承诺，您必须解决这个问题。这已经解释过了。我想你的问题在于时间
如果您执行以下操作，会发生什么情况：
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);
});
}
publicstaticasyncgetelement（locator:By | Function，waitMs？：number）：承诺{
wait BrowserHelper.waitForVisibilityOf（定位器，waitMs | 1000）；
返回元件（定位器）；
}
公共静态sendKeys（定位器：按|函数，键：字符串，清除？：布尔，waitMs？：数字）：承诺{
返回BrowserHelper.getElement（定位器，waitMs）。然后（（元素：ElementFinder）=>{
如果（！清除）{
返回元素；
}
返回元素.clear（），然后（（）=>元素）；
}).然后（（元素：ElementFinder）=>{
返回元素。sendKeys（键）
});
}
公共静态异步waitForVisibilityOf（定位器：按|函数，waitMs？：编号）：承诺{
wait browser.wait（EC.presenceOf（element（locator）），waitMs | | 5000）。然后（（）=>{
//可见的
}，（错误）=>{
错误（'waitForVisibilityOf'超时），定位器，错误）；
});
}
我想你的问题在于时间
如果您执行以下操作，会发生什么情况：
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);
});
}
publicstaticasyncgetelement（locator:By | Function，waitMs？：number）：承诺{
wait BrowserHelper.waitForVisibilityOf（定位器，waitMs | 1000）；
返回元件（定位器）；
}
公共静态sendKeys（定位器：按|函数，键：字符串，清除？：布尔，waitMs？：数字）：承诺{
返回BrowserHelper.getElement（定位器，waitMs）。然后（（元素：ElementFinder）=>{
如果（！清除）{
返回元素；
}
返回元素.clear（），然后（（）=>元素）；
}).然后（（元素：ElementFinder）=>{
返回元素。sendKeys（键）
});
}
公共静态异步waitForVisibilityOf（定位器：按|函数，waitMs？：编号）：承诺{
wait browser.wait（EC.presenceOf（element（locator）），waitMs | | 5000）。然后（（）=>{
//可见的
}，（错误）=>{
错误（'waitForVisibilityOf'超时），定位器，错误）；
});
}
您遇到的错误是什么？请添加您得到的错误。我所说的错误是指文本不会被插入。但是我在控制台上没有看到任何错误消息。您得到的错误是什么？请添加您得到的错误。我所说的错误是指文本不会被插入。但是我在控制台上没有看到任何错误消息。哦，是的，没有使用getText（）。它是生成的，我只是忘了删除它。不幸的是，即使有你的改变，它也不起作用。可能还有其他猜测吗？哦，是的，没有使用getText（）。它是生成的，我只是忘了删除它。不幸的是，即使有你的改变，它也不起作用。还有其他猜测吗？这不是问题所在。不幸的是，它仍然不起作用。有关更多信息，请参阅我的编辑。奇怪，仍然没有输出指示元素（）
版本发生了什么？也许可以尝试添加“---verbose`