javascript - 如何用量角器选择组件元素?
问题描述
我有组件“添加新”,它实际上是按钮。已经尝试通过添加 css、id、className 和该选择元素进行选择,但我仍然不可见。
量角器中的方法应该选择“添加新”按钮。
clickAddNewBtn() {
console.log("Click on Add New button.");
return element(by.css('.add-new')).click();
}
Html:“添加新”按钮(组件):
import { Component, Output, Input } from '@angular/core';
@Component({
selector: 'nano-add-new-button',
template: `
<div class='nano-f-r nano-f add-new'>
<i class='fa fa-plus'></i>
<span class='nano-ml-5 add-new'>
Add New
</span>
</div>`
})
export class NanoAddNewButtonComponent {
}
知道为什么我不能选择某些类 ID 或组件选择器添加新按钮吗?
Audience.e2e-spec.ts:规格测试文件:
describe('Category Rule functionality', () => {
let loginPage: LoginPage;
let audiencePage: AudiencePage;
beforeEach(() => {
loginPage = new LoginPage();
audiencePage = new AudiencePage();
});
it('Auto QA bot should be able to make new Category rule and save.', () => {
console.log("Navigate on login page");
loginPage.navigateTo();
console.log("Fill login form");
loginPage.fillCredentials();
console.log("After login go to Audience tab");
audiencePage.goToAudienceTab();
audiencePage.clickAddNewBtn();
audiencePage.typeTextInAudienceNameField();
audiencePage.pickRangeLast14Days();
audiencePage.selectCategoryRule();
audiencePage.typeTextInCategoryRuleTextArea();
audiencePage.clickSaveBtn();
expect(audiencePage.getNotification()).toEqual('Audience saved');
});
});
Audience.po.ts 文件:
export class AudiencePage {
navigateTo() {
return browser.get('/private/audience');
}
goToAudienceTab() {
return element(by.xpath('/html/body/nano-app/nano-private/nano-navigation/div/div[3]/a/span')).click();
}
clickAddNewBtn() {
console.log("Click on Add New button.");
return element(by.tagName('nano-add-new-button')).click();
}
typeTextInAudienceNameField() {
console.log("Type text in audience name field");
return element(by.css('.nano-white-smoke-input')).sendKeys('Test');
}
pickRangeLast14Days() {
return element(by.xpath('/html/body/nano-app/nano-private/nano-modal/div/div/div/div/nano-modal-entity/nano-audience-edit/form/div/div[2]/nano-audience-date-range/div[2]/label[2]/span'));
}
openRuleDropdown() {
return element(by.xpath('/html/body/nano-app/nano-private/nano-modal/div/div/div/div/nano-modal-entity/nano-audience-edit/form/div/nano-audience-rules/div[1]/div[2]/div[1]/nano-drop-down/div/button/div/span')).click();
}
selectCategoryRule() {
return element(by.xpath('/html/body/nano-app/nano-private/nano-modal/div/div/div/div/nano-modal-entity/nano-audience-edit/form/div/nano-audience-rules/div[1]/div[2]/div[1]/nano-drop-down/div/ul/li[5]/button/div/span')).click();
}
typeTextInCategoryRuleTextArea() {
return element(by.xpath('/html/body/nano-app/nano-private/nano-modal/div/div/div/div/nano-modal-entity/nano-audience-edit/form/div/nano-audience-rules/div[1]/div[2]/div[2]/nano-category-rule/div/textarea')).sendKeys('Test');
}
clickAddRuleBtn() {
return element(by.name('button .nano-c-p')).click();
}
clickSaveBtn() {
return element(by.id('save')).click();
}
getNotification() {
return element(by.xpath('notification')).getText();
}
}
解决方案
解决方案是通过所有定位器从 Add New 中选择“add new”类。
clickAddNewBtn() {
console.log("Click on Add New button.");
return element.all(by.css('add new'));;
}
推荐阅读
- python - 如果有更多,如何向下滚动一个向下滚动条
- html - 调整页面大小时图像向左或向右移动
- python - 如何使用 boto3 按名称获取状态 RDS 实例
- function - VHDL:在函数的变量声明区域中无法识别类型
- list - 如何获得飞镖中两个列表之间的差异?
- microsoft-graph-api - 获取 SharePoint Online 中文档库的角色继承状态
- javascript - 如何在 webpack 中导入的 html 文件中使用 index.js 中的导入样式?
- angular - 仅在当前行启用进度条
- php - 在没有登录用户的情况下使用门授权的可能性
- swift - 如何在 SwiftUI 中使用属性化字符串