← Back to library
Playwrightassertionsintermediatev1.20+
Assert element attributes and CSS
Check href, aria-label, disabled state, and computed CSS on elements.
1test('button and link attributes are correct', async ({ page }) => {
2 await page.goto('/profile');
3
4 const saveBtn = page.getByRole('button', { name: 'Save' });
5 await expect(saveBtn).toHaveAttribute('type', 'submit');
6 await expect(saveBtn).not.toBeDisabled();
7 await expect(saveBtn).toHaveCSS('cursor', 'pointer');
8
9 // ARIA label on an image
10 const avatar = page.getByRole('img', { name: /avatar/i });
11 await expect(avatar).toHaveAttribute('alt', /avatar/i);
12
13 // Data attribute
14 const badge = page.getByTestId('plan-badge');
15 await expect(badge).toHaveAttribute('data-plan', 'pro');
16});#attribute#aria#disabled#css#toHaveAttribute