cy.contains shouldn't use content from script/style tags in the body #15947
Comments
|
@duaneatat Can you provide a full example of this? Because Cypress does filter out |
jennifer-shehane
added
stage: needs information
|
Sure! take a look at: https://codepen.io/markduane/pen/YzNojLQ The line you reference above will indeed prevent matching on |
|
@duaneatat Can you provide an example of a failing test against this codepen? It looks like all of the text inside the script tag in this case is visible on the screen. |
|
My apologies, it only appears that way because the example was outputting textContent to the innerHtml of a div on the page. If you look here: https://codepen.io/markduane/pen/YzNojLQ you'll see the value that is logged into the Console includes the javascript, but that javascript isn't rendered to the page. |
|
Ok, below is a reproducible example. it('passes even though in script tag', () => {
cy.visit('index.html')
// should not pass, but does
cy.contains('I am in the script tag in body')
})
it('fails as expected', () => {
cy.visit('index.html')
// fails correctly
cy.contains('I am in the script tag in head')
})<html>
<script>
console.log('I am in the script tag in head')
</script>
<body>
<h1>Look at Console for values</h1>
<script>
console.log('I am in the script tag in body')
</script>
</body>
</html>
|
jennifer-shehane
changed the title
jennifer-shehane
added
stage: ready for work
|
Duplicate of #14861. |
jennifer-shehane
added
type: duplicate
cypress/packages/driver/src/dom/elements.ts
Line 1066 in 56234e5
Since
elem.textContentwill include strings that are inside non-visible nodes like<script>and<style>tags,cy.containscan result in false-positives and false negatives. I discovered this while writing tests for a SSR app (using Next.js).In this case, the test failed because the value of
deletedTextwas found inbody.textContentsince that value was present in a<script>tag that was part of the original HTML.In this case, an element may get clicked if it contains a script tag that contains the text
Button that doesn't exist. This happens pretty easily with our SSR app, where the react component names end up in a script tag, regardless of whether they are visible or not. So the test will pass on that line and proceed after clicking thebody.Is it possible to add an option to allow only visible contents to be matched (and internally use
innerText)?E.g.
cy.contains("Visible text", {visibleOnly: true});The text was updated successfully, but these errors were encountered: