diff --git a/frontend/tests/pages/home/filter.test.ts b/frontend/tests/pages/home/filter.test.ts index 57cfc4681..30772e15e 100644 --- a/frontend/tests/pages/home/filter.test.ts +++ b/frontend/tests/pages/home/filter.test.ts @@ -36,14 +36,14 @@ const CATEGORY_FILTERS = new Set(['imageModality', 'workflowStep']); async function clickOnFilterButton(filterKey: FilterKey) { const filterButton = await page.$( - `[data-testid=pluginFilter][data-filter=${filterKey}]`, + `[data-testid=pluginFilter][data-filter=${filterKey}]:visible`, ); await filterButton?.click(); } async function getOptions(labels: string[]) { const labelSet = new Set(labels); - const optionNodes = await page.$$('[role=tooltip] [role=option]'); + const optionNodes = await page.$$('[role=tooltip] [role=option]:visible'); interface OptionResult { label: string; @@ -71,11 +71,13 @@ async function getOptions(labels: string[]) { async function getChips(filterKey: FilterKey, labels: string[]) { const labelSet = new Set(labels); - const chipNodes = await page.$$(`[data-filter=${filterKey}] .MuiChip-root`); + const chipNodes = await page.$$( + `[data-filter=${filterKey}] .MuiChip-root:visible`, + ); const result: string[] = []; for (const node of chipNodes) { - const labelNode = await node.$('.MuiChip-label'); + const labelNode = await node.$('.MuiChip-label:visible'); const label = await labelNode?.textContent(); if (label && labelSet.has(label)) { result.push(label); @@ -149,6 +151,7 @@ async function testPluginFilter({ async function testClearAll() { await page.goto(getSearchUrl(...params)); await openAccordion(); + await page.waitForTimeout(500); let chipLabels = await getChips(filterKey, options); expect(chipLabels).toEqual(options); @@ -156,7 +159,7 @@ async function testPluginFilter({ ? 'category' : 'requirement'; await page.click( - `[data-testid=clearAllButton][data-filter-type=${filterType}]`, + `[data-testid=clearAllButton][data-filter-type=${filterType}]:visible`, ); chipLabels = await getChips(filterKey, options); diff --git a/frontend/tests/pages/home/pagination.test.ts b/frontend/tests/pages/home/pagination.test.ts index f87fa2f6a..06206001d 100644 --- a/frontend/tests/pages/home/pagination.test.ts +++ b/frontend/tests/pages/home/pagination.test.ts @@ -12,6 +12,7 @@ function hasPageQueryParameter(pageValue: number) { async function getResultNames() { const nameNodes = await getSearchResultNames(); const names = await Promise.all(nameNodes.map((node) => node.textContent())); + return names; } @@ -160,6 +161,7 @@ describe('Plugin Pagination', () => { await page.waitForNavigation(); await page.goBack(); await page.waitForNavigation(); + await page.waitForTimeout(500); await testResults({ page: 2, totalPages: 3, diff --git a/frontend/tests/pages/home/search.test.ts b/frontend/tests/pages/home/search.test.ts index 2903384b6..20ca7176d 100644 --- a/frontend/tests/pages/home/search.test.ts +++ b/frontend/tests/pages/home/search.test.ts @@ -46,7 +46,7 @@ describe('Plugin Search', () => { it('should clear query when clicking on app bar home link', async () => { await page.goto(getSearchUrl([SearchQueryParams.Search, 'video'])); - await page.click('[data-testid=appBarHome]'); + await page.click('[data-testid=appBarHome]:visible'); await expect(await getFirstSearchResultName()).not.toHaveText( 'napari_video', ); @@ -62,7 +62,8 @@ describe('Plugin Search', () => { [SearchQueryParams.Sort, SearchSortType.Relevance], ); expect(page.url()).toEqual(expectedUrl); - await expect(await getFirstSearchResultName()).toHaveText('napari_video'); + await page.waitForTimeout(500); + await expect(await getFirstSearchResultName()).toMatchText('napari_video'); }); it('should maintain search query when navigating back', async () => { @@ -74,6 +75,7 @@ describe('Plugin Search', () => { await page.goBack(); await page.waitForNavigation(); + await page.waitForTimeout(500); expect(getQueryParameterValues(SearchQueryParams.Search)).toContain(query); await expect(await getFirstSearchResultName()).toHaveText('napari_video'); diff --git a/frontend/tests/pages/home/sort.test.ts b/frontend/tests/pages/home/sort.test.ts index 946d07102..5797a6820 100644 --- a/frontend/tests/pages/home/sort.test.ts +++ b/frontend/tests/pages/home/sort.test.ts @@ -52,7 +52,7 @@ async function testPluginSort({ await page.goto(getSearchUrl()); await maybeOpenAccordion(AccordionTitle.Sort); await preTestRadios?.(); - await clickOnRadio(`input[value=${sortType}]`); + await clickOnRadio(`input[value=${sortType}]:visible`); await testSortResults(); } @@ -94,7 +94,7 @@ describe('Plugin Sort', () => { // Select different radio first because the `sort` parameter is not // populated on initial load. await clickOnRadio( - `[data-testid=sortByRadio][data-sort-type=${SearchSortType.PluginName}]`, + `[data-testid=sortByRadio][data-sort-type=${SearchSortType.PluginName}]:visible`, ); }, diff --git a/frontend/tests/pages/home/utils.ts b/frontend/tests/pages/home/utils.ts index 76b4295c1..0f0af9ada 100644 --- a/frontend/tests/pages/home/utils.ts +++ b/frontend/tests/pages/home/utils.ts @@ -5,11 +5,11 @@ import { breakpoints } from '@/theme'; * @returns The first search result name. */ export function getFirstSearchResultName() { - return page.$('[data-testid=searchResultName]'); + return page.$('[data-testid=searchResultName]:visible'); } export function getSearchResultNames() { - return page.$$('[data-testid=searchResultName]'); + return page.$$('[data-testid=searchResultName]:visible'); } /**