如果您使用的是材料形式，请在 Angular 中使用柏树进行选择 [英] Make selection using cypress in Angular if you're using material forms
问题描述
我有一个看起来像这样的表单:
...
当我尝试使用 cypress 选择下拉菜单时，它告诉我它不可见.当我遵循 cypress 提供的解释性 URL 时，它建议我在点击中使用 {force: true} .这让我的测试通过了，但实际上似乎从未选择过项目.
我还遵循了此处提供的解决方案，并在实际选项(注意我的 select 和 option 标签不是 md-select 和 md-option 标签)
在我的 cypress 目录中的 sample.spec.js:
<代码>...it('注册一个新用户', () =>{cy.get('button[id=new-account-button]').click();cy.get('input[id=affiliation]').type(affiliation);cy.get('input[id=password]').type(pass);cy.get('input[id=userName]').type(name);cy.get('input[id=email]').type(email);//现在选项cy.get('[name="chooseGender"]').click({force: true});cy.get('option').contains("Female").then(option =>{cy.wrap(option).contains("女");选项[0].click();});...我想有两件事我不太明白:
- 为什么实际上没有选择一个选项?
- 尽管如此，为什么测试还是通过了?
我在下面提供了我的确切问题的回购:
git clone https://github.com/Atticus29/dataJitsu.gitcd datajitsugit checkout cypress-SO在/src/app 中创建一个 api-keys.ts 文件并用要跟随的文本填充它
npm 安装服务(在单独的终端选项卡中)
npm run e2eapi-keys.ts:
export var masterFirebaseConfig = {apiKey: "AizaSyCaYbzcG2lcWg9InMZdb10pL_3d1LBqE1A",authDomain: "dataJitsu.firebaseapp.com",databaseURL: "https://datajitsu.firebaseio.com",存储桶:"",messagesSenderId: "495992924984"};导出 var masterStripeConfig = {publicApiTestKey: "pk_test_NKyjLSwnMosdX0mIgQaRRHbS",secretApiTestKey: "sk_test_6YWZDNhzfMq3UWZwdvcaOwSa",publicApiKey: "",secretApiKey: ""};我发现以下测试适用于您的存储库(最新提交 353633c)，
describe('Test Gender Select', () => {之前(功能(){cy.visit('http://localhost:4200/')})it('注册一个新用户', () => {cy.get('button').contains('创建新账户').click();cy.get('#gender').select('女性', {力量:真实});cy.get('#gender').contains('女性')});});您可以从 Cypress 测试运行器中看到它确实选择了女性选项，所以我相信它涵盖了您最初测试的目的.
如果我尝试像这样使用 click()
cy.get('#gender').click({力量:真实});柏树传递讯息
<块引用>CypressError:无法在元素上调用 cy.click().改用 cy.select() 命令来更改值.
因此，请遵循此说明并使用
cy.get('#gender').select('Female');给出以下关于可见性的错误消息，这似乎是使用材料设计(angular-material 和 materialize)的 select 的标准.
CypressError: Timed out retrying: cy.select() failed because this element is not visible ... 解决这个问题，或使用 {force: true} 禁用错误检查.
所以在 cy.select() 上使用 { force: true } 选项可以解决这个问题.
我了解出现可见性问题是因为材料设计用选项列表覆盖了父级，而赛普拉斯使用基于父级的可见性标准(请参阅此 问题)，尽管现在 force 选项有效(使用 Cypress v3.0.3).
I have a form that looks something like this:
<form class="col s12" materialize [formGroup]="newUserForm">
...
<div class="row">
<div class="input-field col m4 s12">
<select formControlName="genderBound" materialize="material_select" id="gender" name="test">
<option value="" disabled selected name="chooseGender">Choose gender</option>
<option *ngFor="let gender of genders">{{gender}}</option>
</select>
<label for="gender">Gender</label>
</div>
...
When I try to use cypress to select the dropdown menu, it tells me that it's not visible. When I follow the explanatory URL that cypress provides, it suggest that I use {force: true} inside my click. This allowed my test to pass, but never actually seemed to select the items.
I also followed the solutions provided here, and implemented a jQuery click on the actual option (Note that my select and option tags are not md-select and md-option tags)
sample.spec.js in my cypress directory:
...
it('signs up a new user', () =>{
cy.get('button[id=new-account-button]').click();
cy.get('input[id=affiliation]').type(affiliation);
cy.get('input[id=password]').type(pass);
cy.get('input[id=userName]').type(name);
cy.get('input[id=email]').type(email);
//Now the options
cy.get('[name="chooseGender"]').click({force: true});
cy.get('option').contains("Female").then(option =>{
cy.wrap(option).contains("Female");
option[0].click();
});
...
I suppose there's two things I don't quite understand:
- Why wasn't an option actually selected?
- Why did the test pass despite this?
I provide a repo with my exact issue below:
git clone https://github.com/Atticus29/dataJitsu.git
cd dataJitsu
git checkout cypress-SO
Make an api-keys.ts file in /src/app and populate it with the text to follow
npm install
ng serve
(In a separate terminal tab)
npm run e2e
api-keys.ts:
export var masterFirebaseConfig = {
apiKey: "AIzaSyCaYbzcG2lcWg9InMZdb10pL_3d1LBqE1A",
authDomain: "dataJitsu.firebaseapp.com",
databaseURL: "https://datajitsu.firebaseio.com",
storageBucket: "",
messagingSenderId: "495992924984"
};
export var masterStripeConfig = {
publicApiTestKey: "pk_test_NKyjLSwnMosdX0mIgQaRRHbS",
secretApiTestKey: "sk_test_6YWZDNhzfMq3UWZwdvcaOwSa",
publicApiKey: "",
secretApiKey: ""
};
I found the following test to work with your repository (Latest commit 353633c),
describe('Test Gender Select', () => {
before(function () {
cy.visit('http://localhost:4200/')
})
it('signs up a new user', () => {
cy.get('button').contains('Create New Account').click();
cy.get('#gender').select('Female', {
force: true
});
cy.get('#gender').contains('Female')
});
});
You can see from the Cypress test runner that it has indeed selected the Female option, so I believe it covers the aim of your original test.
If I try to use click() like so
cy.get('#gender').click({
force: true
});
cypress gives the message
CypressError: cy.click() cannot be called on a element. Use cy.select() command instead to change the value.
So, following this instruction and using
cy.get('#gender').select('Female');
gives the following error message about visibility, which seems to be standard for a select using material design (both angular-material and materialize).
CypressError: Timed out retrying: cy.select() failed because this element is not visible ... Fix this problem, or use {force: true} to disable error checking.
so using { force: true } option on cy.select() fixes this problem.
I understand the visibility issue occurs because material design covers the parent with the options list, and Cypress uses criteria for visibility based on the parent (see this question), although now the force option works (with Cypress v3.0.3).
这篇关于如果您使用的是材料形式，请在 Angular 中使用柏树进行选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
