[EDU-18407] test(cypress): add search E2E test suite#469
Open
PedroAntunesCosta wants to merge 55 commits into
Open
[EDU-18407] test(cypress): add search E2E test suite#469PedroAntunesCosta wants to merge 55 commits into
PedroAntunesCosta wants to merge 55 commits into
Conversation
Adds HYBRID_SEARCH_ENABLED env var to cypress config and introduces searchFor/submitSearch custom commands for the search test specs.
✅ Deploy Preview for leafy-mooncake-7c2e5e ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Covers five cases for search with hybrid flag OFF: input presence, autocomplete dropdown, results URL, result card visibility, and no hybrid-endpoint console errors.
The search components use data-cy="search" (not data-testid="search-input") and have no data-testid on the autocomplete dropdown or result cards. Use structural selector for autocomplete items and .searchCardTitle for result cards (stable className on SearchCard component). Resolves B-1.
The search input (flex:0) is collapsed until its container is clicked. Click the parent Flex container first to expand/focus before clear+type. Also check container visibility in test 1 instead of the collapsed input.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
The hamburger-menu component also renders a SearchInput in the DOM, giving 2 [data-cy="search"] elements. Use .first() to target only the header search input throughout searchFor, submitSearch, and spec.
The Netlify preview can be slow after several tests run consecutively. 10s pageLoadTimeout is too tight; override to 30s for this spec's visit.
- search-results.cy.js: 4 tests covering Enter/button submit, card href validity, and empty-state via intercept gating - search-autocomplete.cy.js: 4 tests covering dropdown appearance, suggestion click navigation, outside-click dismiss, and See all results - search-locale.cy.js: 3 tests (en/pt/es) verifying locale reflected in URL and results present after locale switch - search-pagination.cy.js: 3 tests covering infinite-scroll load, duplicate-href check, and scroll-accumulation - search-doctype-filter.cy.js: describe.skip skeleton pending EDU-18406 Selectors use confirmed classes (.searchCardTitle, [data-cy="search"]) from component source — no data-testid attrs exist in Algolia components.
search-results: drop closest('a') href check — SearchCard wraps Flex not
<a> with legacyBehavior, so no <a> ancestor exists on result cards
search-autocomplete: replace 'See all results' link check (unreliable,
depends on Algolia returning >7 hits) with href check on first suggestion
link (autocomplete items ARE real <a> tags)
search-locale: replace verifyLocale (URL check) with locale button check —
router.push({pathname:'/search'}) does not preserve locale in the URL
search-pagination: replace closest('a') href uniqueness check with
new-title-appeared check after scrolling
cy.switchLocale from '/' gives URL '/pt' (no trailing slash), failing the
command's own include('/pt/') assertion before search is even submitted.
Locale-switching.cy.js works because it starts from an inner doc page.
Replace switchLocale + verifyLocale with direct visit to locale doc page
(/pt/docs/tutorials, /es/docs/tutorials) then submitSearch — same pattern
the existing locale-switching spec uses.
Replaces describe.skip skeleton with four working tests targeting SearchFilterTabBar. Viewport set to 1023px (tab bar hidden at >=1024px per brand-ui 64em breakpoint). Depends on data-testid attributes to be added to vtexdocs/components feat/hybrid-search branch per temp/edu-18407/agent-prompt-add-filter-testids.md.
…ion-status
Cypress always appends a trailing slash to baseUrl, so
`${baseUrl}/path` produces `https://host//path`. This caused
extra HTTP redirects that slowed the spec down (~3.5 min vs ~30 s)
and intermittently prevented pages from rendering article content.
Remove the redundant leading slash from all three URL/log usages.
…rl (EDU-18407) - Remove cy.url() assertion from submitSearch — coupled command to navigation side-effect, failing specs that submit without a redirect (Rec 6) - Strip trailing slash from baseUrl in helpcenter-navigation-status.cy.js to prevent double-slash URL construction (Rec 7)
…us spec After T-22 stripped the trailing slash from baseUrl, urlPrefix values like 'announcements/' (no leading slash) produced broken URLs such as '...netlify.appannouncements/slug'. Ensure urlPrefix always starts with '/' so page URLs are always correctly formed regardless of baseUrl trailing-slash state.
Adds Cypress.log() before return false in the global uncaught:exception handler so Minified React error / invariant / hydration exceptions are visible in the Cypress command log and CI screenshots instead of being silently dropped. Suppression logic is unchanged; the log makes it possible to distinguish a real search-UI crash from a benign hydration warning without disabling the safety net.
…TODO
Both call sites in sidebar-navigation.cy.js that use { force: true } now
have a comment explaining the animation workaround and referencing the
tracking ticket EDU-18495 for follow-up.
Addresses T-25: two retries cover Netlify Function cold-start flakes (60 s timeout on first attempt warms the Function; second attempt passes). Three retries add ~3 min of CI overhead for no additional benefit.
Add a "Pre-warm Netlify Functions and SSR routes" step between the URL resolution step and the Cypress run. Hits /api/navigation (Netlify Function cold-start source) and two SSR pages before tests start. Uses --max-time 90 with 3 retries; never exits 1 on failure so a slow warm does not abort CI.
/en/docs/tutorials → /docs/tutorials (aligns with what locale-switching and search-locale specs actually visit). Add /pt/docs/tutorials and /es/docs/tutorials — the ISR compute instances for these locales are separate from the English pool and were the routes failing in CI.
…27/T-28/T-29) Root cause: Netlify ISR renders cold pages on first request (getStaticProps + fallback:'blocking'), intermittently exceeding the 60s cy.visit timeout. - helpcenter-navigation-status: second before() warms each randomly selected page via cy.request (90s timeout) before the asserting cy.visit loop - copy-for-llm: warm EN/ES/PT tutorial URLs at end of before() after slugs resolved - locale-switching: new before() warms all 7 statically known page URLs - cypress.config.cjs: pageLoadTimeout 60000 → 120000 as a safety net for pages that are slow even after warming
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is the purpose of this pull request?
Adds a full Cypress E2E test suite for Help Center search, covering the
current Algolia path and stubbing the upcoming hybrid search (doctype filter)
path.
What problem is this solving?
EDU-18407 — Add Cypress search tests
No automated E2E coverage existed for the search feature. This PR closes
that gap so that the hybrid search rollout (EDU-17906, vtexdocs/helpcenter
PR #456) can land on a branch that already has passing search tests.
Changes
Config / infrastructure
cypress.config.cjs— addsenvblock withHYBRID_SEARCH_ENABLEDflag; raisespageLoadTimeoutto 60 s (Netlify preview cold-start fix)src/tests/cypress/support/commands.js— addssearchFor,submitSearch(Enter-only; no submit button inSearchInput), andgetAutocompleteSuggestionscustom commands.github/workflows/e2e-tests.yml— step summary updated to list search suites;MAX_ATTEMPTSraised to 240 (40-min polling window for slow Netlify builds);workflow_dispatchtrigger added withdeploy_urlinput to bypass the wait steps when triggering manually against an already-live previewNew specs (all in
src/tests/cypress/integration/)search-regression.cy.jssearch-results.cy.jssearch-autocomplete.cy.jssearch-locale.cy.jssearch-pagination.cy.jssearch-doctype-filter.cy.jsdescribe.skip— blocked on EDU-18406Bug fix (EDU-18495)
src/tests/cypress/integration/sidebar-navigation.cy.js— adds{ force: true }to the EN sidebar.click()call to resolve a pre-existing animation flake (was 11/12; now 12/12 ✅)Selector decisions
[data-cy="search"].first()— Algolia'sSearchInputhas no
data-testid;.first()disambiguates the header vshamburger-menu instance
.searchCardTitle— stable class onSearchCardtitleTextcy.getAutocompleteSuggestions()— centralizesthe
.first().parent().parent().find('a')traversal; nodata-cyattributeon the dropdown container in
@vtexdocs/componentsKnown pending item
search-doctype-filter.cy.jsruns asdescribe.skip(4 pending, CI green).The 4
it()calls have name-only stubs — no bodies, no selectors, noassertions. Unblocked by EDU-18406 (portal-side doctype filter UI); the full
implementation will be introduced in PR #456 when that work lands.
How to manually test
E2E Testsworkflow automatically.locale 3/3, pagination 3/3, sidebar-navigation 12/12, doctype-filter 4 pending.
Total: 40 passing, 4 pending, 0 failing.
If Netlify is slow and the automated run times out:
deploy_url, and trigger.Types of changes