Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to validate Playwright locators in Visual Studio Code without executing tests?

I am working on test automation using Playwright in VSCode (JS). Before completing the entire functionality, I want to verify whether my locators are correct.
Currently, I can only see if a locator works by using that locator during test execution. Is there something like ‘pick locator’ tool that allows me to input a locator and preview the highlighted elements in the browser view? Alternatively, are there any other efficient methods to check locators within the development environment?

Upon expecting the "pick locator" feature to accept user-provided locators, I found out instead that it can only display the locator of the selected element.
Also this "pick locator" doesn’t work for me because it produces bad locators with a lot of text fields that won’t work in real test runs.

Tags:

2

Answers


  1. 0

    Yes, this is possible.

    If you have the browser loaded, e.g. after you have played the last of your test steps, you just need to click on the locator definition in your test in vscode. If it is visible in the browser it will be highlighted. This has been a feature of Playwright for quite a long time now so if your versions of Playwright and the vscode extension are fairly up to date it should be working.

    Login or Signup to reply.
  2. 0

    You can run Playwright with Inspector to validate your locators during a test run

    npx playwright test your_test.spec.ts --debug

    or add

    await page.pause();

    to run a test from a specific breakpoint.

    From there you can edit and preview locators.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search