Angular Academy · Leçon

Sélecteurs et vérifications

Ciblez les éléments et vérifiez leur état

Sélecteurs et vérifications est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

De bons sélecteurs rendent les tests stables

La manière dont vous trouvez les éléments détermine la robustesse de vos tests. Les sélecteurs liés aux classes CSS ou à la structure du DOM cessent de fonctionner à chaque refonte. Les locateurs sémantiques destinés aux utilisateurs résistent aux réorganisations, car ils reflètent ce que les utilisateurs perçoivent réellement.

getByRole : le locateur privilégié

getByRole trouve les éléments selon leur rôle d’accessibilité et leur nom accessible. C’est le locateur le plus résilient et il constitue également une vérification de l’accessibilité.

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

getByLabel et getByPlaceholder

Pour les champs de formulaire, trouvez-les à partir de leur étiquette associée ou de leur texte indicatif, exactement comme un utilisateur les identifie.

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

getByText et getByTestId

getByText recherche le texte visible. Lorsqu’aucune référence sémantique n’existe, utilisez en dernier recours getByTestId, qui lit un attribut data-testid que vous ajoutez volontairement.

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

Éviter les sélecteurs CSS fragiles

Vous pouvez toujours utiliser page.locator('.css-selector'), mais considérez cette solution comme un dernier recours. Les noms de classes et l’imbrication changent souvent ; les rôles et les étiquettes, rarement.

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

Assertions axées sur le Web

Le expect de Playwright pour les locateurs suit une approche axée sur le Web : il réessaie automatiquement jusqu’à ce que la condition soit remplie ou que le délai expire. C’est la clé d’assertions stables.

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

Comparateurs d’assertion courants

Le comparateur décrit l’état attendu d’un élément ou d’une page.

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/);

Vérifier le nombre d’éléments d’une liste

Pour vérifier des éléments répétés, trouvez-les tous et vérifiez leur nombre. Le locateur correspond à chaque élément, et toHaveCount réessaie jusqu’à obtenir un résultat stable.

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

Assertions négatives

Utilisez .not pour vérifier qu’un élément est absent ou masqué, par exemple après la suppression d’un élément.

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

Filtrer et chaîner les locateurs

Affinez un locateur avec filter ou chaînez-le pour limiter la recherche à l’intérieur d’un parent, ce qui permet des assertions précises.

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

Pourquoi l’approche axée sur le Web est préférable aux vérifications manuelles répétées

Les assertions axées sur le Web réessaient toute l’expression, au lieu de relire simplement un instantané obsolète. Ainsi, await expect(loc).toHaveText('Done') attend que le texte apparaisse, ce qui élimine les problèmes de concurrence qui affectent les attentes écrites manuellement.

Vérification rapide

Choisissez le locateur le plus résilient.

Récapitulatif

Privilégiez les locateurs sémantiques : getByRole, getByLabel, getByText, avec getByTestId en solution de repli. Utilisez des comparateurs axés sur le Web (toBeVisible, toHaveText, toHaveCount, toHaveURL) qui réessaient automatiquement, ainsi que .not et filter pour rester précis.

Questions Fréquemment Posées

La leçon « Sélecteurs et vérifications » est-elle gratuite ?

Oui — le texte complet de « Sélecteurs et vérifications » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Sélecteurs et vérifications » ?

Ciblez les éléments et vérifiez leur état Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Sélecteurs et vérifications » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy