← 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