Conversation
Deploying beaconchain with
|
| Latest commit: |
f017cde
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://48635b16.beaconchain.pages.dev |
| Branch Preview URL: | https://tests-landing-page.beaconchain.pages.dev |
enzo-bitfly
left a comment
enzo-bitfly
left a comment
There was a problem hiding this comment.
It's great to see the semantic role selectors being used in the tests 🌟
| workflow_dispatch: | ||
| inputs: | ||
| environment: | ||
| description: "Choose environment" |
There was a problem hiding this comment.
suggestion: 'Staging environments' perhaps
|
|
||
| await expect(page.getByText('© 2025 beaconcha.in. All rights reserved')).toBeVisible() | ||
| }) | ||
| }) |
There was a problem hiding this comment.
issue: our Playwright tests should focus on key user flows, not component behaviour. This should be tested in unit/component tests (which we don't have atm but will write later™)
Think for example of the repeated navigations and goBacks using real browser APIs. This is too expensive.
For particularly important links like 'Privacy policy' you can simply make sure they're there and then have a test that checks that all these links work just by requesting them, without using the navigation, for example:
test('privacy policy link is reachable', async ({ request }) => {
const response = await request.get('https://storage.googleapis.com/legal.beaconcha.in/privacy.pdf')
expect(response.status()).toBe(200)
expect(response.headers()['content-type']).toContain('pdf')
})
| test('click on Login Button and verify user redirects to Sign In page', async ({ | ||
| page, | ||
| }) => { | ||
| const loginBtn = page.getByRole('button', { name: 'Log in' }) | ||
| await loginBtn.focus() | ||
| await page.keyboard.press('Enter') | ||
| await expect(page.getByRole('heading', { name: 'Sign in to beaconcha.in' })).toBeVisible() | ||
| await LoginPage.email(page).fill(email) | ||
| await LoginPage.password(page).fill(password) | ||
| await page.waitForLoadState('networkidle') | ||
| await LoginPage.loginBtn(page).click() | ||
| await expect(page).toHaveURL('/products#stacking-hub') | ||
| await expect(page.getByText('Seamless access to blockchain data on')).toBeVisible() | ||
| await expect(page.getByRole('button', { name: 'Open user menu' })).toBeVisible() | ||
| const userMenuBtn = page.getByRole('button', { name: 'Open user menu' }) | ||
| await userMenuBtn.focus() | ||
| await page.keyboard.press('Enter') | ||
| await expect(page).toHaveURL('/user/settings') | ||
| await expect(page.getByText('Account Settings')).toBeVisible() | ||
| }) | ||
| }, |
There was a problem hiding this comment.
praise: this is the type of e2e tests we need 👍
| await options.nth(0).click() | ||
| await expect(page).toHaveURL( | ||
| /beaconcha\.in\/address\/0x4838b106fce9647bdf1e7877bf73ce8b0bad5f97/i, | ||
| ) |
| await search.fill(txHash) | ||
| await expect(page.getByRole('button', { name: /^Addresses$/ })).toBeVisible() | ||
| await expect(page.getByRole('button', { name: /^All$/ })).toBeVisible() | ||
| await expect(page.getByRole('button', { name: /^Tx Hashes$/ })).toBeVisible() |
There was a problem hiding this comment.
issue: These buttons are checked for in many tests - this make the tests more expensive and their intent less clear. Each filtering test will need to use the corresponding filter button to click on it, and that should be enough verification.
| const resultsRoot = page.locator('div[id^="reka-combobox-content-"]').filter({ | ||
| has: page.locator('div[role="group"][id^="reka-combobox-group-"]'), | ||
| }) |
There was a problem hiding this comment.
issue: mentioning internals of a component library in tests makes them flaky, as these attributes may change for example with an update of reka-ui. But maybe you had no choice, which brought to my attention that the groups are not correctly labeled here. I fixed this now and you should be able to find the groups by role and name in https://hoodi-staging.beaconcha.in/products
| await expect(page.getByRole('heading', { name: 'Staking & Multi-EVM Data Made' })).toBeVisible() | ||
| await expect(page.getByText('Access validator stats, rewards, and onchain data with one powerful API.')).toBeVisible() | ||
| await expect(page.getByRole('link', { name: 'Get your API Key' })).toBeVisible() | ||
| await expect(page.getByRole('link', { name: 'Compare Plans' })).toBeVisible() |
There was a problem hiding this comment.
issue: like mentioned before, e2e tests should focus on core user flows and not in details like this. If you want to ensure that the expected elements are there, maybe screenshot tests could be a better idea.
2 participants
No description provided.