Skip to content

Commit

Permalink
fix: Improve support for shadow dom traversal methods (#8202)
Browse files Browse the repository at this point in the history 
* add tests for shadow dom parents with selector

Co-authored-by: Zach Panzarino <zach@panz.io>

* fix cy.parents(<selector>) shadow dom implementation

* add support for .parent() in shadow dom

* reorder alphabetically

* add support for parentsUntil and multiple elements in subject

* move shadow traversals tests into own file

* fix traversal unique sorting

$.uniqueSort was failing the unique part in firefox. also had the ordering wrong.

Co-authored-by: Zach Panzarino <zach@panz.io>
  • Loading branch information
@chrisbreiding @panzarino
chrisbreiding and panzarino authored Aug 13, 2020
1 parent cb19f77 commit 14e13f3
Show file tree
Hide file tree
Showing 5 changed files with 844 additions and 122 deletions.
28 changes: 22 additions & 6 deletions packages/driver/cypress/fixtures/shadow-dom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,38 @@
<head>
<title>Shadow DOM Fixture</title>
</head>
<body>
<body class="filter-me">
<div id="non-shadow-element" class="in-and-out">Non Shadow</div>
<cy-test-element id="shadow-element-1" innerClass="shadow-1" content="Shadow Content 1"></cy-test-element>
<cy-test-element id="shadow-element-2" innerClass="shadow-2" content="Shadow Content 2"></cy-test-element>
<div id="parent-of-shadow-container-0">
<div id="parent-of-shadow-container-1">
<div id="parent-of-shadow-container-1" class="filter-me">
<cy-test-element id="shadow-element-3" innerClass="shadow-3" content="Shadow Content 3"></cy-test-element>
</div>
</div>
<cy-test-element innerClass="shadow-4" content="Shadow Content 4">
<cy-test-element innerClass="shadow-5" content="Shadow Content 5"></cy-test-element>
<cy-test-element id="shadow-element-4" innerClass="shadow-4" content="Shadow Content 4">
<cy-test-element id="shadow-element-5" innerClass="shadow-5" content="Shadow Content 5"></cy-test-element>
</cy-test-element>
<cy-test-element innerClass="shadow-6" content="Shadow Content 6">
<div class="in-shadow-slot">In Shadow Slot</div>
</cy-test-element>
<cy-test-element id="shadow-element-7" innerClass="in-and-out" content="Shadow Content 7"></cy-test-element>
<div id="parent-of-shadow-container-2">
<div id="parent-of-shadow-container-3" class="filter-me">
<cy-test-element id="shadow-element-8" content="
<span class='shadow-8-nested-1 filter-me'>
<span class='shadow-8-nested-2'>
<span class='shadow-8-nested-3 shadow-8-nested'>Shadow </span>
<span class='shadow-8-nested-4 shadow-8-nested'>Content </span>
<span class='shadow-8-nested-5 shadow-8-nested'>8</span>
</span>
</span>
"></cy-test-element>
</div>
</div>
<cy-test-element id="shadow-element-9" content="Shadow Content 9" rootAddition="
<div class='shadow-div'>Shadow Content 9</div>
"></cy-test-element>

<script type="text/javascript">
if (window.customElements) {
Expand All @@ -27,11 +43,11 @@
super()

const root = this.attachShadow({ mode: 'open' })
const para = document.createElement('p')
const content = this.getAttribute('content')
const className = this.hasAttribute('innerClass') ? this.getAttribute('innerClass') : 'shadow-content'
const rootAddition = this.hasAttribute('rootAddition') ? this.getAttribute('rootAddition') : 'shadow-content'

root.innerHTML = `<p class="${className}">${content}</p><input /><slot></slot>`
root.innerHTML = `<div class="shadow-div"><p class="${className}">${content}</p><input /><slot></slot></div>${rootAddition}`
}
})
}
Expand Down
Loading

4 comments on commit 14e13f3

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 14e13f3 Aug 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux x64 version of the Test Runner.

You can install this pre-release platform-specific build using instructions at https://on.cypress.io/installing-cypress#Install-pre-release-version.

You will need to use custom CYPRESS_INSTALL_BINARY url and install Cypress using an url instead of the version.

export CYPRESS_INSTALL_BINARY=https://cdn.cypress.io/beta/binary/5.0.0/linux-x64/circle-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-420944/cypress.zip
npm install https://cdn.cypress.io/beta/npm/5.0.0/circle-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-420938/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 14e13f3 Aug 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AppVeyor has built the win32 ia32 version of the Test Runner.

You can install this pre-release platform-specific build using instructions at https://on.cypress.io/installing-cypress#Install-pre-release-version.

You will need to use custom CYPRESS_INSTALL_BINARY url and install Cypress using an url instead of the version.

Instructions are included below, depending on the shell you are using.

In Command Prompt (cmd.exe):

set CYPRESS_INSTALL_BINARY=https://cdn.cypress.io/beta/binary/5.0.0/win32-ia32/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.zip
npm install https://cdn.cypress.io/beta/npm/5.0.0/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.tgz

In PowerShell:

$env:CYPRESS_INSTALL_BINARY = https://cdn.cypress.io/beta/binary/5.0.0/win32-ia32/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.zip
npm install https://cdn.cypress.io/beta/npm/5.0.0/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.tgz

In Git Bash:

export CYPRESS_INSTALL_BINARY=https://cdn.cypress.io/beta/binary/5.0.0/win32-ia32/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.zip
npm install https://cdn.cypress.io/beta/npm/5.0.0/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.tgz

Using cross-env:

If the above commands do not work for you, you can also try using cross-env:

npm i -g cross-env
cross-env CYPRESS_INSTALL_BINARY=https://cdn.cypress.io/beta/binary/5.0.0/win32-ia32/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.zip npm install https://cdn.cypress.io/beta/npm/5.0.0/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 14e13f3 Aug 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AppVeyor has built the win32 x64 version of the Test Runner.

You can install this pre-release platform-specific build using instructions at https://on.cypress.io/installing-cypress#Install-pre-release-version.

You will need to use custom CYPRESS_INSTALL_BINARY url and install Cypress using an url instead of the version.

Instructions are included below, depending on the shell you are using.

In Command Prompt (cmd.exe):

set CYPRESS_INSTALL_BINARY=https://cdn.cypress.io/beta/binary/5.0.0/win32-x64/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.zip
npm install https://cdn.cypress.io/beta/npm/5.0.0/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.tgz

In PowerShell:

$env:CYPRESS_INSTALL_BINARY = https://cdn.cypress.io/beta/binary/5.0.0/win32-x64/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.zip
npm install https://cdn.cypress.io/beta/npm/5.0.0/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.tgz

In Git Bash:

export CYPRESS_INSTALL_BINARY=https://cdn.cypress.io/beta/binary/5.0.0/win32-x64/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.zip
npm install https://cdn.cypress.io/beta/npm/5.0.0/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.tgz

Using cross-env:

If the above commands do not work for you, you can also try using cross-env:

npm i -g cross-env
cross-env CYPRESS_INSTALL_BINARY=https://cdn.cypress.io/beta/binary/5.0.0/win32-x64/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.zip npm install https://cdn.cypress.io/beta/npm/5.0.0/appveyor-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-34640508/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 14e13f3 Aug 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin x64 version of the Test Runner.

You can install this pre-release platform-specific build using instructions at https://on.cypress.io/installing-cypress#Install-pre-release-version.

You will need to use custom CYPRESS_INSTALL_BINARY url and install Cypress using an url instead of the version.

export CYPRESS_INSTALL_BINARY=https://cdn.cypress.io/beta/binary/5.0.0/darwin-x64/circle-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-420969/cypress.zip
npm install https://cdn.cypress.io/beta/npm/5.0.0/circle-develop-14e13f39a42da171f3a0431a9a14b71016e212dc-420967/cypress.tgz

Please sign in to comment.