From 04b8c24419ea7da047952763803216a6abf1b119 Mon Sep 17 00:00:00 2001 From: Marko Lovric Date: Wed, 29 Jan 2025 11:46:12 +0100 Subject: [PATCH 1/3] Add E2E Testing Antipattern Examples and update README --- README.md | 3 ++- examples/e2e-testing-antipattern-examples.md | 27 ++++++++++++++++++++ recipes/automated-testing.md | 2 ++ 3 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 examples/e2e-testing-antipattern-examples.md diff --git a/README.md b/README.md index 1f5b3a1..267e5ff 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,8 @@ ## Examples -1. [Performance Testing - Antipattern Examples](./examples/performance-testing-antipattern-examples.md) +1. [E2E Testing - Antipattern Examples](./examples/e2e-testing-antipattern-examples.md) +2. [Performance Testing - Antipattern Examples](./examples/performance-testing-antipattern-examples.md) ## 🙌 Want to contribute? diff --git a/examples/e2e-testing-antipattern-examples.md b/examples/e2e-testing-antipattern-examples.md new file mode 100644 index 0000000..872e8e5 --- /dev/null +++ b/examples/e2e-testing-antipattern-examples.md @@ -0,0 +1,27 @@ +# E2E Testing - Antipattern Examples + +## Antipattern 1: Not using accessible locators + +Locating elements by text is a common approach in functional testing, but it is not always the best practice, as it can result in flaky tests. In this example, the test identifies an `` element based on specific text, which can lead to issues such as multiple `` elements containing the same text but serving different roles or an element appearing visible while being hidden due to an `aria-hidden="true"` attribute set by another element. + +```javascript +await page.locator('a').filter({ hasText: 'More info' }); +``` + +### Solution + +Give priority to role-based locators when identifying elements, as they most accurately reflect how users and assistive technologies interact with the page. In this case, the test locates the same `` element, but in this case by its role as a link and its accessible name. + +```javascript +await page.getByRole('link', { name: 'More info' }); +``` + +## Glossary + +### **Locators** + +- Locators are a key component of Playwright's auto-waiting and retry mechanisms. Essentially, they provide a reliable way to identify elements on the page at any given time. + +### **Role Locators, Accessible Locators** + +- A type of locator that aligns with how users and assistive technologies interpret the page, such as recognizing whether an element functions as a button or a checkbox. When using role locators, it's generally recommended to include the accessible name to precisely identify the intended element. diff --git a/recipes/automated-testing.md b/recipes/automated-testing.md index a5c5086..80e47d4 100644 --- a/recipes/automated-testing.md +++ b/recipes/automated-testing.md @@ -220,6 +220,8 @@ deployment process. - Avoid trying to cover all use cases or edge cases in E2E tests; these are better suited for unit or integration tests. +#### [Antipattern Examples](/examples/e2e-testing-antipattern-examples.md) + ### Performance Tests Performance tests replicate typical user scenarios and then scale up to simulate From f30a5e46ce3e01a297963bfa475468f8767095bd Mon Sep 17 00:00:00 2001 From: Marko Lovric Date: Wed, 29 Jan 2025 11:49:37 +0100 Subject: [PATCH 2/3] Extend glossary item --- examples/e2e-testing-antipattern-examples.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/e2e-testing-antipattern-examples.md b/examples/e2e-testing-antipattern-examples.md index 872e8e5..3c45c17 100644 --- a/examples/e2e-testing-antipattern-examples.md +++ b/examples/e2e-testing-antipattern-examples.md @@ -22,6 +22,6 @@ await page.getByRole('link', { name: 'More info' }); - Locators are a key component of Playwright's auto-waiting and retry mechanisms. Essentially, they provide a reliable way to identify elements on the page at any given time. -### **Role Locators, Accessible Locators** +### **Role Locators, Role Based Locators, Accessible Locators** - A type of locator that aligns with how users and assistive technologies interpret the page, such as recognizing whether an element functions as a button or a checkbox. When using role locators, it's generally recommended to include the accessible name to precisely identify the intended element. From 285bd3a4185d4e96c4b28a696e74a662b2d5b647 Mon Sep 17 00:00:00 2001 From: Marko Lovric Date: Wed, 29 Jan 2025 11:55:23 +0100 Subject: [PATCH 3/3] Improve Solution --- examples/e2e-testing-antipattern-examples.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/e2e-testing-antipattern-examples.md b/examples/e2e-testing-antipattern-examples.md index 3c45c17..7ba2aac 100644 --- a/examples/e2e-testing-antipattern-examples.md +++ b/examples/e2e-testing-antipattern-examples.md @@ -10,7 +10,7 @@ await page.locator('a').filter({ hasText: 'More info' }); ### Solution -Give priority to role-based locators when identifying elements, as they most accurately reflect how users and assistive technologies interact with the page. In this case, the test locates the same `` element, but in this case by its role as a link and its accessible name. +Give priority to role-based locators when identifying elements, as they most accurately reflect how users and assistive technologies interact with the page. In this case, the test locates the same `` element, but in this case by its role as a link and its accessible name, making it more resilient to structural or content changes. Additionally, this approach encourages developers to build components with better accessibility practices. ```javascript await page.getByRole('link', { name: 'More info' });