How to create ui tests for custom widgets?

Hi,

I have created a couple of custom widgets and it would be great to test them. I have seen that some of the tests are ui tests, and they have a page variable that allows them to simulate clicks and test the outcome.

I dag through the conftest.py file but I am still quite new to pytest and was unable to find how this page variable is set up.

One file that uses this for example: panel/test_select.py at main Β· holoviz/panel Β· GitHub.

So the question is, how are the tests set up to use this?

Hi @ambrustorok

Welcome to the community. That is a great question.

Panel is using Playwright for its unit tests. Its a really great framework. The page argument is a so called fixture that it provides you to help with your testing.

The port fixture is one that Panel has configured in a conftest.py file.

You can check out the guide Test UI rendering. Let me know what you think - I wrote the guide :smile:

1 Like

We have actually released a series of (great ?!) how-to guides on testing

:point_right:Check out How-to β€” Panel v1.1.0

testing

1 Like

I can only accept one as a solution, so I accepted the one pointing specifically to the UI testing page.
Nice and clean descriptions. This, in combination of looking at your GitHub to learn how you yourselves are testing proved to be the best combination.

Thank you Marc!

1 Like

Hi @Marc ,
Thanks for writing the Test UI rendering guide. It helped me to start with testing.
I’m very new to frontend, so to me it’s not very clear what’s going on. Where can I find more details? What are the prerequisite knowledge to be able to write test for Panel apps?
To be more specific, when I run pytest test_my_app_frontend.py --headed --slowmo 1000 I get the following error.

E playwright._impl._errors.TargetClosedError: Target page, context or browser has been closed
E Browser logs:
E
E ╔════════════════════════════════════════════════════════════════════════════════════════════════╗
E β•‘ Looks like you launched a headed browser without having a XServer running. β•‘
E β•‘ Set either β€˜headless: true’ or use β€˜xvfb-run ’ before running Playwright. β•‘
E β•‘ β•‘
E β•‘ <3 Playwright Team β•‘
E β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•

I’ve installed xvfb, but I’m not sure what the expected setup is.
I eliminated the --headed --slowmo 1000 part, and the test passed. So I’m not able to see what’s happening in the browser.

See Panel app UI test --headed - connecting to remote server - #3 by Marc