search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
47.02k stars 3.18k forks source link

Problem with Reusable polymer based component. #2648

Closed Chinmayans44 closed 6 years ago

Chinmayans44 commented 6 years ago

In our application, html input tag is wrapped and named as lets say input-app

We are using input-app in different places in same html page and I am not able to do cy.get().type() on unique input tag as input-app tag has input which is having same ids.

Do not want to change input-app component definition. What is solution to it?

yuki-93 commented 6 years ago

Maybe you could try to change the order of the selectors, look here https://docs.cypress.io/api/cypress-api/selector-playground-api.html#Syntax For me, I removed the id selector, as my framework generates undeterministic ids. Also you might want to set data-cy attributes, which differ.

Also using cy.get().within() could be the best practice. Inside the within-block, cy.get will only get elements inside a DOM subtree. https://docs.cypress.io/api/commands/within.html#Syntax#article

Chinmayans44 commented 6 years ago

You are saying that i need to modify component'input-app ' and add a attribute to called 'data-cy' to all child tags including 'input' tags(till we reach 'input' tag and query it uniquely). I am using a open source component 'input-app' and when i update it, that tags are gone :(

yuki-93 commented 6 years ago

So maybe using within() is your soloution.

I think, having duplicate ids is not good. I think this could be a bug in your application out framework. The purpose of ids is, to address unique items.

jennifer-shehane commented 6 years ago

You will have to find some way to uniquely query for the input you want in order to type, as you cannot type into multiple elements at the same time, even if it is by writing cy.get('input').eq(2) - which would give you the 3rd input.

It is invalid html to have multiple elements on one page with the same ID also as @yuki-93 stated.

egucciar commented 6 years ago

If it's same IDs it's prob shadowDom? Doesnt polymer use shadowDom?

If it's shadowDom it's not supported by cypress natively. It is however still just JavaScript so shadowDom could work with some elbow grease.