chore: Move assertion, selector, and sync docs to playwright-basics folder for better organization.

Author: kavitaj11

doc/playwright-basics/assertions-playwright.md

@@ -0,0 +1,72 @@
+# Playwright Assertions Guide
+
+This guide covers the basics and best practices for using assertions in Playwright tests.
+
+---
+
+## Why Assertions Matter
+- Assertions validate expected outcomes in your tests.
+- They ensure your app behaves as intended and catch regressions early.
+
+---
+
+## Common Assertion Types
+
+### 1. Page Title
+```js
+await expect(page).toHaveTitle(/TodoMVC/);
+```
+
+### 2. Element Visibility
+```js
+await expect(page.locator('.new-todo')).toBeVisible();
+```
+
+### 3. Element Text
+```js
+await expect(page.locator('.todo-list li')).toHaveText('Test Item');
+```
+
+### 4. Element Count
+```js
+await expect(page.locator('.todo-list li')).toHaveCount(2);
+```
+
+### 5. Attribute Value
+```js
+await expect(page.locator('.new-todo')).toHaveAttribute('placeholder', 'What needs to be done?');
+```
+
+### 6. Element Hidden
+```js
+await expect(page.locator('.footer')).toBeHidden();
+```
+
+---
+
+## Advanced Assertions
+- Use `.not` for negative assertions:
+  ```js
+  await expect(page.locator('.error')).not.toBeVisible();
+  ```
+- Combine assertions for complex checks:
+  ```js
+  await expect(page.locator('.todo-list li')).toHaveText(['First', 'Second']);
+  ```
+
+---
+
+## Best Practices
+- Use Playwright's built-in expect for reliability.
+- Prefer specific assertions (e.g., toHaveText, toHaveCount) over generic ones.
+- Assert before and after actions to validate state changes.
+- Keep assertions clear and descriptive.
+
+---
+
+## Example Suite
+See `tests/assertions/AssertionBasics.spec.js` for practical assertion examples.
+
+---
+
+**For more, see Playwright docs:** https://playwright.dev/docs/test-assertions

doc/playwright-basics/selectors-playwright.md

@@ -0,0 +1,70 @@
+# Playwright Selectors Guide
+
+This guide covers the basics and best practices for using selectors in Playwright tests.
+
+---
+
+## Why Selectors Matter
+- Selectors identify elements for interaction and assertion.
+- Robust selectors make tests reliable and maintainable.
+
+---
+
+## Common Selector Types
+
+### 1. CSS Selector
+```js
+await page.locator('.new-todo');
+```
+
+### 2. Text Selector
+```js
+await page.getByText('todos');
+```
+
+### 3. Role Selector
+```js
+await page.getByRole('textbox', { name: '' });
+```
+
+### 4. Chained Selector
+```js
+await page.locator('.todo-list').locator('li');
+```
+
+### 5. Nth Selector
+```js
+await page.locator('.todo-list li').nth(1);
+```
+
+### 6. Attribute Selector
+```js
+await page.locator('input[placeholder="What needs to be done?"]');
+```
+
+---
+
+## Advanced Selector Strategies
+- Use data-testid or data-role attributes for stable selectors.
+- Combine selectors for complex queries:
+  ```js
+  await page.locator('.parent .child[data-active="true"]');
+  ```
+- Use Playwright's built-in selector engines for flexibility.
+
+---
+
+## Best Practices
+- Prefer stable, unique selectors (avoid brittle ones).
+- Use role and text selectors for accessibility and clarity.
+- Chain selectors for scoped queries.
+- Avoid using index-based selectors unless necessary.
+
+---
+
+## Example Suite
+See `tests/selectors/SelectorBasics.spec.js` for practical selector examples.
+
+---
+
+**For more, see Playwright docs:** https://playwright.dev/docs/selectors

doc/sync-wait-strategies-playwright.md …asics/sync-wait-strategies-playwright.mddoc/sync-wait-strategies-playwright.md renamed to doc/playwright-basics/sync-wait-strategies-playwright.md doc/sync-wait-strategies-playwright.md renamed to doc/playwright-basics/sync-wait-strategies-playwright.md

@@ -0,0 +1,39 @@
+const { test, expect } = require('@playwright/test');
+
+const DEMO_URL = 'https://demo.playwright.dev/todomvc';
+
+test.describe('Assertion Basics', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(DEMO_URL);
+  });
+
+  test('should assert page title', async ({ page }) => {
+    await expect(page).toHaveTitle(/TodoMVC/);
+  });
+
+  test('should assert element is visible', async ({ page }) => {
+    await expect(page.locator('.new-todo')).toBeVisible();
+  });
+
+  test('should assert element has text', async ({ page }) => {
+    await page.fill('.new-todo', 'Test Item');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('.todo-list li')).toHaveText('Test Item');
+  });
+
+  test('should assert element count', async ({ page }) => {
+    await page.fill('.new-todo', 'First');
+    await page.keyboard.press('Enter');
+    await page.fill('.new-todo', 'Second');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('.todo-list li')).toHaveCount(2);
+  });
+
+  test('should assert attribute value', async ({ page }) => {
+    await expect(page.locator('.new-todo')).toHaveAttribute('placeholder', 'What needs to be done?');
+  });
+
+  test('should assert element is hidden', async ({ page }) => {
+    await expect(page.locator('.footer')).toBeHidden(); // Footer is hidden until todos are added
+  });
+});

tests/assertions/AssertionBasics.spec.js

@@ -0,0 +1,39 @@
+const { test, expect } = require('@playwright/test');
+
+const DEMO_URL = 'https://demo.playwright.dev/todomvc';
+
+test.describe('Selector Basics', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(DEMO_URL);
+  });
+
+  test('CSS selector', async ({ page }) => {
+    await expect(page.locator('.new-todo')).toBeVisible();
+  });
+
+  test('Text selector', async ({ page }) => {
+    await expect(page.getByText('todos')).toBeVisible();
+  });
+
+  test('Role selector', async ({ page }) => {
+    await expect(page.getByRole('textbox', { name: '' })).toBeVisible();
+  });
+
+  test('Chained selector', async ({ page }) => {
+    await page.fill('.new-todo', 'Chained');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('.todo-list').locator('li')).toHaveText('Chained');
+  });
+
+  test('Nth selector', async ({ page }) => {
+    await page.fill('.new-todo', 'First');
+    await page.keyboard.press('Enter');
+    await page.fill('.new-todo', 'Second');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('.todo-list li').nth(1)).toHaveText('Second');
+  });
+
+  test('Attribute selector', async ({ page }) => {
+    await expect(page.locator('input[placeholder="What needs to be done?"]')).toBeVisible();
+  });
+});