创建一个 Cypress 命令,根据用户输入获取按钮并添加无限的 Cypress 动作。

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

creating a cypress command that will get button and add infinite cypress action based on user input

问题

我想创建一个 Cypress 自定义命令,根据用户的参数添加 Cypress 动作并将它们链接在一起。

现在我有类似这样的东西:

Cypress.Commands.add(
'selectButton',
(text: string, ...actionType: ButtonActionTypes[]) => {
let cyActions = '';

for (let i = 0; i < actionType.length; i++) {
  const cyAction = actionType[i];
  const getActionType = getAction(text, cyAction);

  if (getActionType !== null) {
    cyActions += `${getActionType}`;
  } else {
    cyActions += cyAction;
  }

  `${cy.get('button')}.${cyActions}`;
}

}
);

function getAction(text, action) {
switch (action) {
case 'click':
'click()';
break;
case 'visible':
'should("be.visible")';
break;
case 'disabled':
'should("be.disabled")';
break;
case 'blur':
'blur()';
break;
case 'contains':
contains(${text});
break;
}
}

但是这并不按照我想要的方式工作。虽然它选择了按钮,但如果我想要创建这样的命令:
`cy.selectButton('Send').should('be.visible').should('be.disabled');`
基于这个
`cy.selectButton('Send', 'visible', 'disabled', 'click');`
我得到的是所有我网站上拥有的按钮。
英文:

I want to create a cypress custom command that based on user arguments will add cypress action and chain them together

Now I have something like this:

Cypress.Commands.add(
  &#39;selectButton&#39;,
  (text: string, ...actionType: ButtonActionTypes[]) =&gt; {
    let cyActions = &#39;&#39;;

    for (let i = 0; i &lt; actionType.length; i++) {
      const cyAction = actionType[i];
      const getActionType = getAction(text, actionType);

      if (getActionType !== null) {
        cyActions += `${getActionType}`;
      } else {
        cyActions += cyAction;
      }

      `${cy.get(&#39;button&#39;)}.${cyActions}`;
    }
  }
);

function getAction(text, action) {
  switch (action) {
    case &#39;click&#39;:
      &#39;click()&#39;;
      break;
    case &#39;visible&#39;:
      &#39;should(&quot;be.visible&quot;)&#39;;
      break;
    case &#39;disabled&#39;:
      &#39;should(&quot;be.disabled&quot;)&#39;;
      break;
    case &#39;blur&#39;:
      &#39;blur()&#39;;
      break;
    case &#39;contains&#39;:
      `contains(${text})`;
      break;
  }
}

But this is not working as i want. Although it is selecting buttons, but if i want to create this:
cy.selectButton(&#39;Send&#39;).should(&#39;be.visible&#39;).should(&#39;be.disabled&#39;);
based on that
cy.selectButton(&#39;Send&#39;, &#39;visible&#39;, &#39;disabled&#39;, &#39;click&#39;);
I am getting all buttons that i have on my site

答案1

得分: 2

你可以处理断言,因为.should('be.visible')下面的语法是expect(subject).to.be.visible,而.to.be.visible只是你断言主题的expect(subject)包装器的属性。

Cypress.Commands.add(
  'selectButton',
  (text: string, ...actionTypes: ButtonActionTypes[]) => {
    let cyActions = '';

    cy.get(text).then($el => {

      const expectWrapper = expect($el)  // 包装主题以进行一系列断言

      [...actionTypes].forEach(actionType => {
        expectWrapper[actionType]
      })      
  }
)

关于命令,我不清楚,动态添加它们可能有点困难 - 可能是不可能的,因为Cypress喜欢在运行之前设置命令队列。

英文:

You could probably handle assertions since the syntax underlying .should(&#39;be.visible&#39;) is expect(subject).to.be.visible and the .to, .be, .visible are just properties of the expect(subject) wrapper of your assertion subject.

Cypress.Commands.add(
  &#39;selectButton&#39;,
  (text: string, ...actionTypes: ButtonActionTypes[]) =&gt; {
    let cyActions = &#39;&#39;;

    cy.get(text).then($el =&gt; {

      const expectWrapper = expect($el)  // wraps subject for chain of assertions

      [...actionTypes].forEach(actionType =&gt; {
        expectWrapper[actionType]
      })      
  }
)

I don't know about the commands, it's a little more difficult to add those dynamically - might be impossible, since Cypress likes to set up the command queue before running it.

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

发表评论

匿名网友

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

确定