Angular Academy · Aula

Seletores e verificações

Selecione elementos e verifique o estado.

Seletores e verificações é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Bons seletores geram testes estáveis

A forma como você encontra os elementos determina o quanto seus testes são robustos. Seletores vinculados a classes CSS ou à estrutura do DOM quebram a cada reformulação. Localizadores semânticos voltados ao usuário sobrevivem a refatorações porque refletem o que os usuários realmente percebem.

getByRole: o localizador preferido

getByRole encontra elementos pela função de acessibilidade e pelo nome acessível. É o localizador mais resiliente e também funciona como uma verificação de acessibilidade.

page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });

getByLabel e getByPlaceholder

Para campos de formulário, localize-os pelo rótulo associado ou pelo texto de espaço reservado, exatamente como um usuário os identifica.

page.getByLabel('Email address');
page.getByPlaceholder('Search products');

getByText e getByTestId

getByText corresponde ao texto visível. Quando não houver uma referência semântica, use getByTestId como alternativa; ele lê um atributo data-testid que você adiciona deliberadamente.

page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">

Evite seletores CSS frágeis

Você ainda pode usar page.locator('.css-selector'), mas trate essa opção como último recurso. Nomes de classes e níveis de aninhamento mudam com frequência; funções e rótulos raramente mudam.

// Fragile, avoid when possible:
page.locator('div.row > button.primary');

Asserções voltadas para a Web

O expect do Playwright para localizadores segue o princípio web-first: ele tenta novamente automaticamente até que a condição seja atendida ou o tempo limite seja atingido. Essa é a chave para asserções sem instabilidade.

await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();

Verificadores de asserção comuns

O verificador descreve o estado esperado de um elemento ou de uma página.

await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);

Verificando quantidades em listas

Para verificar elementos repetidos, localize todos eles e verifique a quantidade. O localizador corresponde a cada elemento, e toHaveCount tenta novamente até que o resultado se estabilize.

const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');

Asserções negativas

Use .not para verificar que algo está ausente ou oculto, por exemplo, depois de excluir um item.

await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();

Filtrando e encadeando localizadores

Refine um localizador com filter ou encadeie-o para limitar o escopo dentro de um elemento pai, mantendo as asserções precisas.

const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();

Por que as asserções voltadas para a Web são melhores que a consulta manual

As asserções voltadas para a Web tentam novamente toda a expressão, em vez de apenas reler uma captura desatualizada. Assim, await expect(loc).toHaveText('Done') espera o texto aparecer, eliminando as condições de corrida que afetam as esperas escritas manualmente.

Verificação rápida

Escolha o localizador mais resiliente.

Recapitulação

Prefira localizadores semânticos: getByRole, getByLabel e getByText, usando getByTestId como alternativa. Faça asserções com verificadores voltados para a Web (toBeVisible, toHaveText, toHaveCount, toHaveURL) que tentam novamente automaticamente, e use .not e filter para manter a precisão.

Perguntas Frequentes

A aula “Seletores e verificações” é grátis?

Sim — o texto completo de “Seletores e verificações” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Seletores e verificações”?

Selecione elementos e verifique o estado. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Seletores e verificações”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy