How to test a component

Custom Components
,
1

Hi all,
I’m wondering whether there is a way to test components.

For example, the first test would be to run it with different parameters to see whether it does not break.
Secondly, I want to check that the component displays something correctly on the page.

Does anybody have any clue or hint they can direct me so that I can start checking it out?

Thank you
Luca

2

How about

3

@edsaac thanks. I saw the documentation, which is more related to testing the full applications, I wonder if there is a way to test the component integration itself.

I found this component-template/template/e2e/test_template.py at master · streamlit/component-template · GitHub as a start, although I’m not sure how to make it works.

4

@lfoppiano My favorite technique for testing a component is making an example app and then using using playwright to check the output of a component on the app – here’s an example streamlit-folium/tests/test_frontend.py at master · randyzwitch/streamlit-folium · GitHub and another example st_pages/tests/test_frontend.py at main · blackary/st_pages · GitHub

If it interacts with normal streamlit widgets, you could also potentially use the app testing framework, but that is not designed to work with 3rd party components directly.

1 Like
5

@blackary thanks. This was very helpful indeed.

I have just one problem for now.
The tests that check whether the iframe is visible are working fine (the ones failing are due to a bug).

However, I have another test that try to find the first node from the component id="PdfContainer" is not found.

    container_locator = page.locator('div[id="pdfContainer"]').nth(0)
    expect(container_locator.is_visible())

When I debug at the beginning of the test and I open the streamlit page from the streamlit runner in the test, the page is showed properly. However, the test cannot access some of the HTML nodes added by the component, and I feel it’s because maybe the test is too fast.

Do you have any suggestions? The sleep(5) in st_pages/tests/test_frontend.py at 23e94c5e7b631afb30c8c334f1244fead8b16712 · blackary/st_pages · GitHub is for that? I tried to add it to my code, but did not work, so maybe it’s not for that :smile_cat:

Feel free to suggest improvements if you see anything better implemented.
All the tests are here if you have time to have a look: streamlit-pdf-viewer/tests at integration-tests · lfoppiano/streamlit-pdf-viewer · GitHub

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

7

So sorry for the lack of response. The sleep(5) is there so that the app finishes loading in the browser before the tests start running. For an individual locator, you can tweak how long playwright will wait before moving on. LocatorAssertions | Playwright Python

If that doesn’t work, I find having playwright taking screenshots on failing tests to be very helpful for debugging. You can see examples of that in st_pages.

1 Like