How to get vaadin selecter with Playwright?

Question

I've tried to find a solution online on how to work with playwright and vaadin code but no chance. Playwright is installed in VS Code, is up and running, I have my test explorer installed and node.js. etc...

The FE that I need to automate(and I'm doing this in .ts) has vaadin code. But calling the selectors with xpath or by simple id locator doesn't work. Anybody an idea on how to do so please? This is an example for login:

import { test as setup } from '@playwright/test';
import path from 'path';


const authFile = path.join(__dirname, '../playwright/auth.setup.ts')


setup('authenticate', async ({ page }) => {
  await page.goto('https://aservice.somewhere/mypage-ui/login');
  await page.locator("xpath=//*[id='vaadinLoginUsername']").fill('_famname');
  await page.locator("xpath=//*[id='vaadinLoginPassword']").fill('_passw');
  await page.locator("xpath=//button[@part='vaadin-login-submit']").click();
  await page.waitForURL('https://aservice.somewhere/mypage-ui/home');
  
  await page.context().storageState({ path: authFile});
})

Even if I add a click() function to it, playwright debugger freezes on the first locator.

Thanks in advance!

Can you find an example of the site under test on vaadin.com/examples-and-demos? If not, please create such an example, since nobody has aservice.somewhere/mypage-ui/login and can't reproduce the issue you're facing. Thanks! — ggorlen
– ggorlen, Commented Dec 5 at 14:22
As an aside, xpath is discouraged. If you do need to use an id (also discouraged), #vaadinLoginUsername is much cleaner and more readable than "xpath=//*[id='vaadinLoginUsername']". Regarding "playwright debugger freezes on the first locator"--does the first .fill() eventually timeout? I suggest sharing the error stack if so. — ggorlen
– ggorlen, Commented Dec 5 at 14:29

Simon Martinelli · Accepted Answer · 2025-12-06 09:37:35Z

0

I wrote a blog post about that a while ago: https://martinelli.ch/ui-testing-with-vaadin-and-playwright/

This is how to use the login form

page.locator("vaadin-text-field[name='username'] > input").fill(username);
page.locator("vaadin-password-field[name='password'] > input").fill(password);
page.locator("vaadin-button").click();

It's Java code, but it should also work with TypeScript if you add await in front of each line above.

Btw., why do you use TypeScript with Vaadin? Because if you use Vaadin, I assume you are a Java developer, and Playwright works well with Java, and you can run it with JUnit.

edited Dec 6 at 9:37

answered Dec 5 at 15:48

Simon Martinelli

36.6k6 gold badges62 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ggorlen Dec 5 at 21:56

All of the page. methods here are discouraged. Prefer locators and user-visible selectors.

Simon Martinelli Dec 6 at 8:32

Those are Webcomponents. Therefore it must get the input from the light dom

ggorlen Dec 6 at 13:43

I'm not sure I follow, aria accessible locators should work. But thanks for the locator update--the code will now auto-wait for actionability.

CD46 yesterday

Hello @simon martinelli, thanks for your response. No, I'm not a developer, I'm an automation tester. Still in the run to learn about FE automation. So I came in this company as a full stack tester and need to automate the FE that is written in vaadin. This is my first time :-) Thank you for your response. I've tried to use it in typescript adding 'await' but the buttons aren't declared so need like yours. Long story ( ;-) ) But I will continue to look for it :-)

Collectives™ on Stack Overflow

How to get vaadin selecter with Playwright?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related