Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement playwright acceptance tests for vertical full page map #1155

Merged
merged 31 commits into from
Dec 4, 2023
Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
56b1688
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
9d556b4
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
83d05c1
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
43a8063
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
fd2bee8
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
ec8e130
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
766fad2
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
eb3436b
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
c71f355
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
c563add
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
843b6d6
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
3b781e0
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
980b667
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
f04d28a
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
8fd3fd2
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
b5318ba
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
f13569b
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
dc814cf
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
14de8da
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
45d6554
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
55f11bd
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
ae618ed
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
f5e4d76
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
6c58224
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
968720b
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
9464f5c
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
00e07cc
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
b639059
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
95365c5
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
9ea02e2
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
8466eca
Implement playwright acceptance tests for vertical full page map
likimmy Nov 17, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 0 additions & 39 deletions .github/workflows/acceptance_browserstack.yml

This file was deleted.

29 changes: 29 additions & 0 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Playwright Tests

on: [push]
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved

jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 14
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Setup test site
run: npm run setup-test-site
- name: Build test site
run: npm run build-test-site
- name: Run playwright tests
run: npx playwright test
- uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
7 changes: 6 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,9 @@ static/node_modules/
static/dist/
node_modules
**/.DS_Store
.idea/
.idea/
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
Copy link
Contributor

Choose a reason for hiding this comment

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

this is duplicated, delete?

/test-results/
118 changes: 118 additions & 0 deletions e2e/vertical-full-page-map.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import { test, expect } from '@playwright/test';

test.describe('full page map test suite', () => {
test.beforeEach(async ({page}) => {
await page.goto('http://localhost:5042/locations_full_page_map');
await page.getByPlaceholder('Search for locations').click();
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
});

test('can search and get results', async ({ page }) => {
await page.getByPlaceholder('Search for locations').fill('virginia');
await page.getByPlaceholder('Search for locations').press('Enter');
const count = await page.locator('#js-answersVerticalResults').count();
expect(count).toBeGreaterThan(0);
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
});

test('clicking on a pin focuses on a result card', async ({ page }) => {
await page.getByPlaceholder('Search for locations').fill('virginia');
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
await page.getByPlaceholder('Search for locations').press('Enter');
await page.getByRole('button', { name: 'Result number 5' }).click();
const results = page.locator('#js-answersVerticalResults div');
const count = await results.count();
let hasPinFocused = false;

for (var i = 0; i < count; i++) {
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
const currResult = await results.nth(i);
const classes = await currResult.evaluate(node => Array.from(node.classList));

if (classes.includes('yxt-Card--pinFocused')) {
hasPinFocused = true;
break;
}
}

expect(hasPinFocused).toBe(true);
});

test('search when map moves works', async ({ page }) => {
await page.getByPlaceholder('Search for locations').fill('virginia');
await page.getByPlaceholder('Search for locations').press('Enter');
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
await page.mouse.wheel(600, 300);
const response = await page.waitForResponse(resp =>
resp.url().includes('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query'));
await expect(response.status()).toBe(200);
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
});

test('search this area button works', async ({ page }) => {
await page.getByPlaceholder('Search for locations').fill('virginia');
await page.getByPlaceholder('Search for locations').press('Enter');
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
await page.getByLabel('Map controls').getByText('Search When Map Moves').click();
await page.locator('div').filter({ hasText: /^Search This Area$/ }).nth(1).click();
await page.mouse.move(1200, 450, {steps: 5});
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
const response = await page.waitForResponse(resp =>
resp.url().includes('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query'));
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
await expect(response.status()).toBe(200);
});

test('default initial search works and is enabled by default', async ({ page }) => {
await page.getByPlaceholder('Search for locations').press('Enter');
const result = page.locator('#js-answersVerticalResults div').nth(0);
await expect(result).toBeAttached();
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
});

test('pagination works', async ({ page }) => {
await page.getByPlaceholder('Search for locations').fill('virginia');
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/);
Copy link
Member

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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!

nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
});

test('pagination scrolls the results to the top', async ({ page }) => {
await page.getByPlaceholder('Search for locations').fill('virginia');
await page.getByPlaceholder('Search for locations').press('Enter');
await page.getByLabel('Go to the next page of results').click();
const locator = page.locator('#js-answersVerticalResults div').nth(0);
await expect(locator).toBeVisible();
});

});

test.describe('full page map with filters test suite', () => {
test.beforeEach(async ({page}) => {
await page.goto('http://localhost:5042/locations_full_page_map_with_filters');
await page.getByPlaceholder('Search for locations').fill('virginia');
await page.getByPlaceholder('Search for locations').press('Enter');
const response = await page.waitForResponse(resp => resp.url().includes('https://prod-cdn.us.yextapis.com/v2/accounts/me/search/vertical/query')
&& resp.url().includes('input=virginia')
&& !resp.url().includes('filters'));
await expect(response.status()).toBe(200);
});

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();
Copy link
Contributor

Choose a reason for hiding this comment

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

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?

await expect(filterView).toBeVisible();
await page.getByRole('button', { name: 'Result number 1' }).click();
await expect(filterView).not.toBeVisible();
});

test('clicking on a cluster causes the map to zoom in', async ({ page }) => {
const originalCount = await page.locator('.yxt-Card').count();
await page.getByRole('button', { name: 'Cluster of 2 results' }).click();
const response = await page.waitForResponse(resp => resp.url().includes('https://prod-cdn.us.yextapis.com/v2/accounts/me/search/vertical/query')
&& resp.url().includes('input=virginia')
&& resp.url().includes('filters'));
await expect(response.status()).toBe(200);
const countAfterSelectingCluster = await page.locator('.yxt-Card').count();
expect(originalCount).toBeGreaterThan(countAfterSelectingCluster);
});

test('clicking on a cluster causes a new search to be run', async ({ page }) => {
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
await page.getByRole('button', { name: 'Cluster of 4 results' }).click();
const response = await page.waitForResponse(resp =>
resp.url().includes('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query'));
await expect(response.status()).toBe(200);
});
});
Loading
Loading