Implement playwright acceptance tests for vertical full page map #1155
Conversation
e2e/vertical-full-page-map.spec.ts
Outdated
| await page.getByPlaceholder('Search for locations').fill('virginia'); | ||
| await page.getByPlaceholder('Search for locations').press('Enter'); | ||
| await page.getByRole('button', { name: 'Result number 5' }).click(); | ||
| const locator = page.locator('#js-answersVerticalResults div').nth(134); |
There was a problem hiding this comment.
what is the 134 value here? is there another way to target it that is makes easier to understand what is being selected?
There was a problem hiding this comment.
from what I was able to see there isn't a better way to target this component. js-answersVerticalResults has several children, each of which have nested children as well and this is the only component i could use to drill down into the specific div that has the pinFocused class
There was a problem hiding this comment.
I wonder if it's possible to write a query that checks for the pinFocused class on any of the children of #js-answersVerticalResults div. That way we don't need to include the 134 number because that seems like it could break easily if the search results change
e2e/vertical-full-page-map.spec.ts
Outdated
| const isScrolledUp = await page.evaluate(() => { | ||
| return window.scrollY === 0; | ||
| }); |
There was a problem hiding this comment.
we should check the scrollTop of the .Answers-resultsWrapper. I don't believe the scrollY of the window itself changes on pagination
There was a problem hiding this comment.
I was struggling getting the correct component because Answers.resultsWrapper didn't seem to work/have a scrollTop member. Instead I just checked if the first element of the results was visible, but let me know if this is not robust enough for what we are testing here!
tests-examples/demo-todo-app.spec.ts
Outdated
| @@ -0,0 +1,437 @@ | |||
| import { test, expect, type Page } from '@playwright/test'; | |||
|
|
|||
| test.beforeEach(async ({ page }) => { | |||
There was a problem hiding this comment.
are these tests intended to be here?
There was a problem hiding this comment.
oops, these were auto-generated. deleted!
There was a problem hiding this comment.
It looks like these were auto-generated again. I wonder if you need to disable something in order to prevent this from being created again
e2e/vertical-full-page-map.spec.ts
Outdated
| await page.getByPlaceholder('Search for locations').press('Enter'); | ||
| await page.getByLabel('Go to the next page of results').click(); | ||
| const secondPage = page.locator('#js-answersVerticalResultsCount'); | ||
| await expect(secondPage).toHaveText(/21/); |
There was a problem hiding this comment.
I'm cautious about this check because this would break if an entity is added to the account because it would change the results count. Another idea is checking the query params of the web page to see if the offset changed. But if it's too much effort I think we can stick with this because the slapshot test account is pretty stable
There was a problem hiding this comment.
I used 21 because the offset is set to 20 for each page, so i think as long as the results size is more than 20, even if the total results count changes the check for 21 should work, but let me know if i am misunderstanding your comment!
.gitignore
Outdated
| /blob-report/ | ||
| /playwright/.cache/ | ||
| /test-results/ |
There was a problem hiding this comment.
this is duplicated, delete?
e2e/vertical-full-page-map.spec.ts
Outdated
| test('clicking on a pin closes the filter view', async ({ page }) => { | ||
| await page.getByRole('button', { name: 'filter results' }).click(); | ||
| await page.getByText('Cats (1)').click(); | ||
| const filterView = page.getByLabel('Main location search').locator('div').filter({ hasText: 'Filters Services reset Cats (1) Dogs (1) Sleep (1)' }).first(); |
There was a problem hiding this comment.
Would this text always be exactly like this? I'm worried the order/number might change. Would you be able to select the element using something like classname/label or do a regex match of the text?
* Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map * Implement playwright acceptance tests for vertical full page map
J=BACK-2714