Cypress：设置属性值

Posted 2023-02-15

【中文标题】Cypress：设置属性值

【英文标题】：Cypress: set attribute value

【发布时间】：2018-04-18 07:33:22

【问题描述】：

我刚刚开始探索 Cypress，遇到了这样一个问题：是否可以像在 Selenium 中一样在 javascriptExecutor 的帮助下选择一个具体的属性并更改其值？例如，让我们来看看这段简单的代码

input id="mapsearch" type="textbox" class="form-control" name="address" test=""

是否可以获取测试属性并分配我自己的值？

【问题讨论】：

可以使用html5数据属性。数据测试=“测试”。然后你可以根据这个属性值来选择它。

【参考方案1】：

是的。在赛普拉斯测试中，您可以在 JavaScript 中做的任何事情都是可能的。对于上面的 html，您可以在 Cypress 中使用 .invoke() 执行此操作：

cy.get('input[test]')
  .invoke('attr', 'test', 'my new value')
  .should('have.attr', 'test', 'my new value')

Cypress 在底层使用 jQuery，因此您可以像这样调用 jQuery 中的任何函数。您也可以在使用 .then() 产生输入后使用纯 JavaScript：

cy.get('input[test]').then(function($input)
    $input[0].setAttribute('test', 'my new value')
  )
  .should('have.attr', 'test', 'my new value')

【参考方案2】：

虽然 Jennifer 的回答实际上适用于大多数输入元素，但有一个例外，尤其是当应用程序只接受 input/change event 上的输入值时，因为调用不会触发事件。

我有这样的经验，下面的代码对我有用。

在 Commands.js 中：

Cypress.Commands.add('inputChange', (input, value) => 
    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      'value'
    ).set

    const changeInputValue = inputToChange => newValue => 
      nativeInputValueSetter.call(inputToChange[0], newValue)
      inputToChange[0].dispatchEvent(new Event('input', 
        newValue,
        bubbles: true,
        composed: true
      ))
    

    return cy.get(input).then(input => 
      changeInputValue(input)(value)
    )
  )

在测试中：

   cy.get('[data-test="voy-lat-long-input"]')
        .then(input => cy.inputChange(input, Longtitude))

【讨论】：

您还应该能够在.invoke() 之后添加.trigger('change') 来触发更改事件（或者.trigger('input')，如果它是您需要的输入事件）。

是的，这也是一种选择。这是我尝试的第一件事，但对我没有用。

【参考方案3】：

你可以试试这个

cy.get('.class/#id').type('type your new value',  force: true );

【讨论】：

.type() 为我输入输入，但随后挂起并超时。用力和不用力。