Cypress: set attribute value

user_6124635 0
Viewed 40031

I have just started exploring Cypress and came across such a problem: is it possible to select a concrete attribute and change its value like in Selenium with the help of JavascriptExecutor? For example lets take this simple piece of code

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

Is it possible to get the test attribute and assign my own value?

cypress javascript
3 Answers

Yes. Anything you can do in JavaScript is possible within Cypress tests. For the html above, you could do this within Cypress using .invoke():

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

Cypress uses jQuery under the hood, so you can invoke any function in jQuery like this. You could alternatively use plain JavaScript after yielding the input using .then():

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

You can try with this

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

While Jennifer's answer actually works for most of the input elements, there is an exception especially when the application only takes the input value on input/change event as invoke will not trigger the event.

I had such experience and the below code worked for me.

In 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)
    })
  })

And in Tests:

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