← Back to Discord Forum

Tab Testing

Hi Guys, Could really use some help with Tab Testing. I am trying to create a test that loops through a page using the Tab key to find elements. Once it finds the correct element it will then fill in the details for example firstName and then break. Any ideas?

This thread is trying to answer question "How to create a test that loops through a webpage using the Tab key to find elements and fill in details?"

5 replies

Can you use a nested control flow (for loop with an if statement)

  • Find all elements that have a tab index
  • for loop through the elements
  • get name attribute for the elements
  • if name equals firstName then fill it in and break the loop.
  • if not page.keyboard.press(‘Tab’)

Ok thank you will give this a try

Can i ask why you can’t just go directly to the first name input field? Or is that a part of the test case?

This test is for accessibility testing, so trying to replicate the steps a blind person would use

with no clicks and tabbing through the page


Navigating a Page with Tab Key in Playwright

Let's dive into how you can create a test in Playwright that navigates through a webpage using the Tab key.

First, navigate to your test page with page.goto('https://ray.run').

Next, find the starting point for your loop. If you're starting from an input field, use page.locator('input').

// Navigate to the page
await page.goto('https://ray.run');

// Start from an input field
const startingElement = await page.locator('input');

Now, simulate pressing the Tab key with locator.press('Tab'). This moves the focus from one element to another sequentially.

// Simulate pressing Tab key
await startingElement.press('Tab');

After pressing Tab, check if the newly focused element is the one you're looking for. If it matches your criteria, fill in the details with locator.fill().

// Check if current element matches desired criteria
const isDesiredElement = /* Add your condition here based on desired criteria */;
if (isDesiredElement) {
  // Perform actions on the desired element
  await currentElement.fill('Details');
  // Add more actions as needed

Repeat these steps to continue looping through the elements on the page.

// Move to the next element
currentElement = await page.$(':focus');

Remember, this is a general approach. You might need to tweak it based on your specific page structure and requirements. Also, be sure to handle any potential errors or edge cases that may arise during the loop. Happy testing!

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.