如何使用Cypress自定义命令递增并返回JSON文件字段输入的内容。

huangapple go评论76阅读模式
英文:

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(&#39;newUser&#39;, () =&gt; {
  return cy.readFile(&#39;cypress/fixtures/users.json&#39;).then((user) =&gt; {
    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(&#39;&#39;);
    cy.writeFile(&#39;cypress/fixtures/users.json&#39;, { user: newUser }).then(() =&gt; {
      return cy.wrap(newUser);
    });
  });
});

<!-- language: lang-js -->

it(&#39;Test 3 - Check password requirments&#39;, () =&gt; {
    // Write new user to Fixtures for further tests
    cy.newUser().then((newUser) =&gt; {
      // cy.log(newUser);
      cy.get(&#39;[data-cy=&quot;email_field&quot;]&#39;).type(newUser);
    });
  });

huangapple
  • 本文由 发表于 2023年5月21日 00:48:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76296328.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定