From e7f2768f25c0eb0da5306806cbfbaa0d17d0c0bb Mon Sep 17 00:00:00 2001 From: Saninn Salas Diaz <5490201+distante@users.noreply.github.com> Date: Sat, 18 Apr 2026 11:02:20 +0200 Subject: [PATCH 1/3] feat: ensure selectors are not find in ion-page-hidden pages --- .../e2e/get-from-supported-selector.spec.ts | 36 +++++++++++++++---- html/index.html | 9 ++++- package.json | 4 +-- src/helpers/get-from-supported-selector.ts | 23 ++++++++---- 4 files changed, 56 insertions(+), 16 deletions(-) diff --git a/cypress/e2e/get-from-supported-selector.spec.ts b/cypress/e2e/get-from-supported-selector.spec.ts index 323ef3b..b57519d 100644 --- a/cypress/e2e/get-from-supported-selector.spec.ts +++ b/cypress/e2e/get-from-supported-selector.spec.ts @@ -9,21 +9,21 @@ describe('Get From Supported Selector', () => { it('css selector', () => { getFromSupportedSelector('.testing-class').should( 'have.text', - 'Label With Class' + 'Label With Class', ); }); it('Chainable Object from class', () => { getFromSupportedSelector(cy.get('.testing-class')).should( 'have.text', - 'Label With Class' + 'Label With Class', ); }); it('Chainable Object from test-id', () => { getFromSupportedSelector(cy.findByTestId('testing-test-id')).should( 'have.text', - 'Label With Test Id' + 'Label With Test Id', ); }); @@ -31,17 +31,39 @@ describe('Get From Supported Selector', () => { cy.get('.testing-class').then(($jQueryObject) => { getFromSupportedSelector($jQueryObject).should( 'have.text', - 'Label With Class' + 'Label With Class', ); }); }); + describe('ignores elements inside ion-page-hidden', () => { + it('css selector', () => { + getFromSupportedSelector('.testing-class-hidden').should( + 'have.length', + 0, + ); + }); + + it('Chainable Object', () => { + getFromSupportedSelector(cy.get('.testing-class-hidden')).should( + 'have.length', + 0, + ); + }); + + it('JQuery Object', () => { + cy.get('.testing-class-hidden').then(($jQueryObject) => { + getFromSupportedSelector($jQueryObject).should('have.length', 0); + }); + }); + }); + describe('waiting for components hydration', () => { it('css selector', () => { getFromSupportedSelector('.ion-range-to-test-hydration') .then(($ionRange) => { return $ionRange[0].shadowRoot?.querySelector( - '.range-knob-handle-a, .range-knob-handle.range-knob-a' + '.range-knob-handle-a, .range-knob-handle.range-knob-a', ); }) .should('exist'); @@ -51,7 +73,7 @@ describe('Get From Supported Selector', () => { getFromSupportedSelector(cy.get('.ion-range-to-test-hydration')) .then(($ionRange) => { return $ionRange[0].shadowRoot?.querySelector( - '.range-knob-handle-a, .range-knob-handle.range-knob-a' + '.range-knob-handle-a, .range-knob-handle.range-knob-a', ); }) .should('exist'); @@ -63,7 +85,7 @@ describe('Get From Supported Selector', () => { getFromSupportedSelector($jQueryObject) .then(($ionRange) => { return $ionRange[0].shadowRoot?.querySelector( - '.range-knob-handle-a, .range-knob-handle.range-knob-a' + '.range-knob-handle-a, .range-knob-handle.range-knob-a', ); }) .should('exist'); diff --git a/html/index.html b/html/index.html index 82a52f1..09df2a9 100644 --- a/html/index.html +++ b/html/index.html @@ -1,4 +1,4 @@ - + @@ -22,6 +22,13 @@

Get from supported selectors

+
+ + Label Inside Hidden Page + +
Label With Test Id Label With Class diff --git a/package.json b/package.json index 2c96eec..2ae6bc3 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "full-test": "start-server-and-test serve http://localhost:3999 test-ci", "ci": "tsx --experimental-json-modules ./scripts/test.mjs", "build": "tsc --project tsconfig.json", - "make-docs": "typedoc", + "make-docs": "typedoc --cname cypress-ionic.saninnsalas.com", "tsc:check": "tsc --noEmit", "prettier:check": "prettier --config ./.prettierrc ./src --check", "release": "release-it --verbose", @@ -87,7 +87,7 @@ "release-it": { "hooks": { "before:init": "npm run build && npm run ci", - "after:bump": "npx typedoc && git add ./docs && git commit -m 'docs: pre-release docs'", + "after:bump": "npm run make-docs && git add ./docs && git commit -m 'docs: pre-release docs'", "after:release": "echo Successfully released ${name} v${version} to https://${repo.host}/${repo.repository}/releases/tag/v${version}" }, "git": { diff --git a/src/helpers/get-from-supported-selector.ts b/src/helpers/get-from-supported-selector.ts index 2b9ebd9..7c7b33c 100644 --- a/src/helpers/get-from-supported-selector.ts +++ b/src/helpers/get-from-supported-selector.ts @@ -6,20 +6,31 @@ export function getFromSupportedSelector( selector: SupportedSelectors, ): CypressIonicReturn { if (typeof selector === 'string') { - return cy.get(`${selector}.hydrated`); + return filterOutHiddenPage(cy.get(`${selector}.hydrated`)); } if (isJQuery(selector)) { - // selector.attr('cypress-ionic-test-id', ) - return cy.wrap(selector).should('have.class', 'hydrated'); + return filterOutHiddenPage( + cy + .wrap(selector) + .should('have.class', 'hydrated') as CypressIonicReturn, + ); } - return (selector as unknown as CypressIonicReturn).should( - 'have.class', - 'hydrated', + return filterOutHiddenPage( + (selector as unknown as CypressIonicReturn).should( + 'have.class', + 'hydrated', + ), ); } +function filterOutHiddenPage( + subject: CypressIonicReturn, +): CypressIonicReturn { + return subject.not('.ion-page-hidden *') as unknown as CypressIonicReturn; +} + function isJQuery( selector: SupportedSelectors, ): selector is JQuery { From 7c1bfd0daa09ac1430598e85b11ff7c4fb551fdb Mon Sep 17 00:00:00 2001 From: Saninn Salas Diaz <5490201+distante@users.noreply.github.com> Date: Sat, 18 Apr 2026 11:05:26 +0200 Subject: [PATCH 2/3] chore: updated axios in package-lock.json --- package-lock.json | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7b7c09b..7d7abe5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2629,9 +2629,9 @@ "license": "MIT" }, "node_modules/axios": { - "version": "1.14.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.14.0.tgz", - "integrity": "sha512-3Y8yrqLSwjuzpXuZ0oIYZ/XGgLwUIBU3uLvbcpb0pidD9ctpShJd43KSlEEkVQg6DS0G9NKyzOvBfUtDKEyHvQ==", + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.15.0.tgz", + "integrity": "sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==", "dev": true, "license": "MIT", "dependencies": { @@ -2699,9 +2699,9 @@ "license": "MIT" }, "node_modules/basic-ftp": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.2.0.tgz", - "integrity": "sha512-VoMINM2rqJwJgfdHq6RiUudKt2BV+FY5ZFezP/ypmwayk68+NzzAQy4XXLlqsGD4MCzq3DrmNFD/uUmBJuGoXw==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.3.0.tgz", + "integrity": "sha512-5K9eNNn7ywHPsYnFwjKgYH8Hf8B5emh7JKcPaVjjrMJFQQwGpwowEnZNEtHs7DfR7hCZsmaK3VA4HUK0YarT+w==", "dev": true, "license": "MIT", "engines": { @@ -3657,9 +3657,9 @@ } }, "node_modules/defu": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz", - "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==", + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz", + "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==", "dev": true, "license": "MIT" }, @@ -4779,9 +4779,9 @@ "license": "ISC" }, "node_modules/follow-redirects": { - "version": "1.15.11", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz", - "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==", + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz", + "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==", "dev": true, "funding": [ { @@ -6166,9 +6166,9 @@ } }, "node_modules/lodash": { - "version": "4.17.23", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz", - "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==", + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz", + "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==", "dev": true, "license": "MIT" }, From 086500c09e48680689f27e0ce7190bcda0530a32 Mon Sep 17 00:00:00 2001 From: Saninn Salas Diaz <5490201+distante@users.noreply.github.com> Date: Sat, 18 Apr 2026 11:27:48 +0200 Subject: [PATCH 3/3] chore: added more resilent selector and tests --- README.md | 2 +- cypress.config.ts | 1 + .../e2e/get-from-supported-selector.spec.ts | 38 +++++++++++++++++++ package.json | 2 +- src/helpers/get-from-supported-selector.ts | 4 +- 5 files changed, 44 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8b1b683..d6fd53a 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ it('can be changed by set value', () => { ## Development Each exported function is directly tested on Cypress. -Call `npm run develop` to start a simple server and open cypress. +Call `npm run start` to start a simple server and open cypress. You can see the served host on `http://localhost:3999` with: - [html/index.html](/html/index.html) is the file with the supported components. diff --git a/cypress.config.ts b/cypress.config.ts index d4933b3..5e328cd 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -3,6 +3,7 @@ import { defineConfig } from 'cypress'; export default defineConfig({ includeShadowDom: true, projectId: '1tfaog', + allowCypressEnv: false, e2e: { // We've imported your old cypress plugins here. // You may want to clean this up later by importing these. diff --git a/cypress/e2e/get-from-supported-selector.spec.ts b/cypress/e2e/get-from-supported-selector.spec.ts index b57519d..a3cb02b 100644 --- a/cypress/e2e/get-from-supported-selector.spec.ts +++ b/cypress/e2e/get-from-supported-selector.spec.ts @@ -36,6 +36,44 @@ describe('Get From Supported Selector', () => { }); }); + describe('returns only visible element when selector matches both hidden and visible pages', () => { + beforeEach(() => { + cy.document().then((doc) => { + doc.body.insertAdjacentHTML( + 'beforeend', + ` +
+ Hidden Label +
+
+ Visible Label +
+ `, + ); + }); + }); + + it('css selector', () => { + getFromSupportedSelector('.testing-class-conflict') + .should('have.length', 1) + .should('have.text', 'Visible Label'); + }); + + it('Chainable Object', () => { + getFromSupportedSelector(cy.get('.testing-class-conflict')) + .should('have.length', 1) + .should('have.text', 'Visible Label'); + }); + + it('JQuery Object', () => { + cy.get('.testing-class-conflict').then(($jQueryObject) => { + getFromSupportedSelector($jQueryObject) + .should('have.length', 1) + .should('have.text', 'Visible Label'); + }); + }); + }); + describe('ignores elements inside ion-page-hidden', () => { it('css selector', () => { getFromSupportedSelector('.testing-class-hidden').should( diff --git a/package.json b/package.json index 2ae6bc3..4f70686 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "scripts": { "prepare": "husky && ts-patch install -s", "serve": "tsx ./scripts/serve.mjs", - "develop": "start-server-and-test serve http://localhost:3999 test-open", + "start": "start-server-and-test serve http://localhost:3999 test-open", "test-open": "cypress open", "test": "cypress run", "test-ci": "cypress run --config video=false", diff --git a/src/helpers/get-from-supported-selector.ts b/src/helpers/get-from-supported-selector.ts index 7c7b33c..a31a648 100644 --- a/src/helpers/get-from-supported-selector.ts +++ b/src/helpers/get-from-supported-selector.ts @@ -28,7 +28,9 @@ export function getFromSupportedSelector( function filterOutHiddenPage( subject: CypressIonicReturn, ): CypressIonicReturn { - return subject.not('.ion-page-hidden *') as unknown as CypressIonicReturn; + return subject.not( + '.ion-page-hidden, .ion-page-hidden *', + ) as unknown as CypressIonicReturn; } function isJQuery(