英文:
How to increment and return contents of a JSON file for field input using Cypress custom commands
问题
I could use some help with explaining to me how custom commands in cypress work. I am currently writing a function that reads a json file and increments the contents by 1 and want to return it to the test spec so it could be typed into a field. Note* new to JS and Cypress
Here is the code from commands.ts:
Cypress.Commands.add('newUser', () => {
cy.readFile('cypress/fixtures/users.js');
const oldUser = user.user;
cy.log(typeof oldUser);
// Getting old number from user
const reg = /\d+/gm;
let oldNum = oldUser.match(reg);
cy.log(oldNum);
oldNum = toInteger(oldNum);
cy.log(typeof oldNum);
// New number for user
const newNum = oldNum + 1;
cy.log(newNum.toString());
let newUser = oldUser.split(reg);
cy.log(newUser);
// Add to a specified location
newUser.splice(1, 0, newNum);
cy.log(newUser);
newUser = newUser.join('');
// cy.log(newUser);
cy.writeFile('cypress/fixtures/users.json', { user: newUser });
return newUser;
});
and I am trying to use it in the spec file like this:
const newUser = cy.newUser();
cy.log(newUser);
cy.get('[data-cy="email_field"]').type(newUser);
I think part of my issue is not fully understanding how 'chaining' works with Cypress and most examples of Custom commands show it using or manipulating something in the DOM but it seems I am more writing a Helper function that I will want to re-use in other tests...
Any guidance is greatly appreciated
I've tried using 'wrap' and 'then' but I don't think I have the order right (probably due to not fully understanding JS)
英文:
I could use some help with explaining to me how custom commands in cypress work. I am currently writing a function that reads a json file and increments the contents by 1 and want to return it to the test spec so it could be typed into a field. Note* new to JS and Cypress
Here is the code from commands.ts:
Cypress.Commands.add('newUser', () => {
cy.readFile('cypress/fixtures/users.js
const oldUser = user.user;
cy.log(typeof oldUser);
// Getting old number from user
const reg = /\d+/gm;
let oldNum = oldUser.match(reg);
cy.log(oldNum);
oldNum = toInteger(oldNum);
cy.log(typeof oldNum);
// New number for user
const newNum = oldNum + 1;
cy.log(newNum.toString());
let newUser = oldUser.split(reg);
cy.log(newUser);
// Add to a specified location
newUser.splice(1, 0, newNum);
cy.log(newUser);
newUser = newUser.join('');
// cy.log(newUser);
cy.writeFile('cypress/fixtures/users.json', { user: newUser });
return newUser;
});
});
and I am trying to use it in the spec file like this:
const newUser = cy.newUser();
cy.log(newUser);
cy.get('[data-cy="email_field"]').type(newUser);
I think part of my issue is not fully understanding how 'chaining' works with Cypress and most examples of Custom commands show it using or manipulating something in the DOM but it seems I am more writing a Helper function that I will want to re-use in other tests...
Any guidance is greatly appreciated
I've tried using 'wrap' and 'then' but I don't think I have the order right (probably due to not fully understanding JS)
答案1
得分: 5
正确的方法是使用回调函数来链接代码,就像这样:
cy.newUser().then(newUser => {
cy.log(newUser)
cy.get('[data-cy="email_field"]').type(newUser)
})
我无法确定你的自定义命令本身是否正确,它看起来很混乱。请考虑在你的问题中发布更整洁的代码。
英文:
The correct way is to chain code with a callback function, like this:
cy.newUser().then(newUser => {
cy.log(newUser)
cy.get('[data-cy="email_field"]').type(newUser)
})
I can't tell if you custom command itself is correct, it's a real mess. Please consider posting tidier code in your question.
答案2
得分: -1
感谢您的帮助!我通过以下方式使其工作:
Cypress.Commands.add('newUser', () => {
return cy.readFile('cypress/fixtures/users.json').then((user) => {
const oldUser = user.user;
const reg = /\d+/gm;
let oldNum = oldUser.match(reg);
oldNum = toInteger(oldNum);
const newNum = oldNum + 1;
let newUser = oldUser.split(reg);
newUser.splice(1, 0, newNum);
newUser = newUser.join('');
cy.writeFile('cypress/fixtures/users.json', { user: newUser }).then(() => {
return cy.wrap(newUser);
});
});
});
it('Test 3 - Check password requirements', () => {
// Write new user to Fixtures for further tests
cy.newUser().then((newUser) => {
// cy.log(newUser);
cy.get('[data-cy="email_field"]').type(newUser);
});
});
请注意,我已经移除了HTML实体编码(例如<
和>
),以便提供代码的清晰翻译。如果需要进一步的翻译或解释,请随时提问。
英文:
Thanks for the help! I was able to make it work by the following:
<!-- language: lang-js -->
Cypress.Commands.add('newUser', () => {
return cy.readFile('cypress/fixtures/users.json').then((user) => {
const oldUser = user.user;
const reg = /\d+/gm;
let oldNum = oldUser.match(reg);
oldNum = toInteger(oldNum);
const newNum = oldNum + 1;
let newUser = oldUser.split(reg);
newUser.splice(1, 0, newNum);
newUser = newUser.join('');
cy.writeFile('cypress/fixtures/users.json', { user: newUser }).then(() => {
return cy.wrap(newUser);
});
});
});
<!-- language: lang-js -->
it('Test 3 - Check password requirments', () => {
// Write new user to Fixtures for further tests
cy.newUser().then((newUser) => {
// cy.log(newUser);
cy.get('[data-cy="email_field"]').type(newUser);
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论