Hello, folks!
Want to master handling static and dynamic dropdowns effortlessly? 
Check out this video where we break it down step-by-step using Playwright with TypeScript! Whether you’re just starting or looking to refine your skills, this tutorial has got you covered. 
Watch now and level up your automation game!
Canvas Handling Static Dropdowns:
Single-Select Dropdowns: For dropdowns defined using the tag with a single selection, you can use the selectOption method to choose an option by its value, label, or index.
// Select by value
await page.locator('select#dropdown').selectOption({ value: 'optionValue' });
// Select by label
await page.locator('select#dropdown').selectOption({ label: 'Option Label' });
// Select by index
await page.locator('select#dropdown').selectOption({ index: 0 });
Multi-Select Dropdowns: For dropdowns that allow multiple selections, pass an array of values to the selectOption method.
await page.locator('select#dropdown').selectOption(['optionValue1', 'optionValue2']);
Assertion: To validate the selected option, use the toHaveValue method.
await expect(page.locator('select#dropdown')).toHaveValue('optionValue');
Handling Dynamic Dropdowns:
Searchable Dropdowns: For dropdowns with a search feature, interact with the search input and select the desired option. // Type into the search input await page.locator(‘input#search’).type(‘Option Name’);
// Click on the desired option
await page.locator('ul#dropdown-options li:has-text("Option Name")').click();
Non-Searchable Dropdowns: For dropdowns without a search feature, click to open the dropdown and select the option.
// Click to open the dropdown
await page.locator('button#dropdown-toggle').click();
// Click on the desired option
await page.locator('ul#dropdown-options li:has-text("Option Name")').click();
Handling Custom Dropdowns:
For custom dropdowns that don’t use standard HTML elements, you may need to interact with the dropdown using custom selectors and actions.