CODEWITHSUNDEEP
angularintegrationcypress
Leo Davtyan
Leo Davtyan

Reputation: 207

How to do a e2e test on an input that is a div (Cypress)?

I have a form which takes the customer's credit card number (3rd party API)

I would like to test it, but I don't know how to type in a fake value when it's not an input?

Here is the error I received:

CypressError: cy.type() failed because it requires a valid typeable element.

<div class="creditCard">
         <label class="label">CC Number</label>
         <div id="card-number" data-cy="cyCredit" class="medium-8 medium-centered columns"></div>
</div>

it("test credit card", function() {
    cy.get('#card-number').type('23923293923293293')
}

Upvotes: 1

Views: 2095

Answers (2)

Ilia Hanev
Ilia Hanev

Reputation: 65

You could try the following, the purpose here is that usually the contenteditable is hidden from the DOM, unless you click/focus a specified element, so the should appear and you can type on it. The "trigger" holds the click until you trigger the cancel event, during that time the contenteditable exists in DOM, therefore you could type on it. The last blur event could be replaced with "change" or anything else that fits your case.

Bear in mind that cypress also uses contenteditable in newer versions, so you could use a more specific selector for your element (#mySpecificSelector[contenteditable])

cy.get(`'#card-number'`)
.trigger("click")
.get(`[contenteditable]`)
.type("TEST")
.blur();

Upvotes: 0

soccerway
soccerway

Reputation: 11991

Cypress will allow to type if the contenteditable="true". In your question you could try the following;

cy.get('#card-number').find('[contenteditable]').type('1100120011401111');

or could you try the below may be: 

cy.get('#card-number').then($div => {
      $div.text('1100120011401111');
});

or if the above doesn't work, try the one below too:

cy.get('#card-number').invoke('val', text).trigger('1100120011401111');

Upvotes: 1

Related Questions