赛普拉斯：设置属性值

Question

我刚刚开始探索 Cypress 并遇到了这样一个问题：是否可以 select 一个具体的属性并在 JavascriptExecutor 的帮助下像在 Selenium 中那样改变它的值？例如让我们拿这段简单的代码

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

是否可以获取test属性，自己赋值？

Answer 1

是的。您在 JavaScript 中可以做的任何事情都可以在 Cypress 测试中实现。对于上面的 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')

Answer 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))

Answer 3

你可以试试这个

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

赛普拉斯：设置属性值

Cypress: set attribute value

javascript

cypress