Fix playwright tests

[nkaretnikov]

Fixes playwright test failures introduced by a yarn update.

Description

This pull request:

• Updates the lockfile to fix an issue caused by updated dependencies, which manifests on CI as follows:

YN0028: The lockfile would have been modified by this install, which is explicitly forbidden.

• Updates tests checking Select elements, which are generated with role combobox after the lockfile update. For example, this shows the change to the code of the Active button:

• Increases the timeout for building an env because the old value was flaky.

Pull request checklist

• Did you test this change locally?
• Did you update the documentation (if required)?
• Did you add/update relevant tests for this change (if required)?

Additional information

[nkaretnikov]

This is necessary because the generated Select component is now a combobox, so the button role doesn't match.

Using get_by_text might look error-prone here, but I think it's okay. The option line below will error out if get_by_text matches something else here.

[nkaretnikov]

Note: I use get_by_text and not get_by_role("combobox", ...) here because playwright fails to find this button with the latter approach.

[nkaretnikov]

As mentioned in the other comment, the generated code now uses combobox instead of button.

[gabalafou]

When I was reviewing this PR, I noticed that after running yarn start if I loaded the web app from localhost:8000, I got a combobox, whereas if I loaded the web app from localhost:8080 I got a button.

[gabalafou]

Okay, I think I see why this happens. It looks like the Conda Store server comes bundled with its own version of Conda Store UI. Wild.

So then this change makes sense; however, I'm now concerned about a possible discrepancy between the environment variables in the GitHub runner environment versus local dev, resulting in this test passing on CI but failing locally.

[gabalafou]

We might need to redefine the default value for CONDA_STORE_SERVER_PORT at the top of the file.

[trallard]

Wait, when was this changed to a combobox? - I thought this was during the #310 PR

In that case both 8080 and 8000 should be returning a combobox.

[nkaretnikov]

The previous timeout value wasn't big enough, so the test was flaky.

[gabalafou]

Could you please explain the process you used to update the yarn lockfile in detailed steps?

As it stands, I don't know how to recreate this PR.

[gabalafou]

I'm marking this as request changes because I'm blocked on reviewing this PR on the following two things:

1. I need to know how to generate the lockfile changes. (See my earlier comment.)
2. I need to know how to run the tests locally. Here's a PR showing the steps I followed to try to run the tests locally.

[gabalafou]

When I was reviewing this PR, I noticed that after running yarn start if I loaded the web app from localhost:8000, I got a combobox, whereas if I loaded the web app from localhost:8080 I got a button.

[nkaretnikov]

@gabalafou Happy to help, LMK if the following doesn't answer your questions.

I need to know how to generate the lockfile changes.

I did yarn install locally, it updated the lockfile, I committed the lockfile to the repo, see:
https://stackoverflow.com/a/77300807

I need to know how to run the tests locally.

• do docker ps to make sure no containers are running.
• do yarn run start. This will create containers needed for running the server and will start the UI as well.
• make sure the above prints webpack 5.89.0 compiled successfully in 58181 ms
• take a look at the GitHub workflow because it explains how this test runs on CI: https://github.com/conda-incubator/conda-store-ui/blob/main/.github/workflows/test.yml#L3
• do the same locally:

playwright_env.sh:

# export REACT_APP_AUTH_TOKEN=
export CONDA_STORE_SERVER_PORT='8000'
export CONDA_STORE_BASE_URL='http://localhost:8000'
export CONDA_STORE_AUTH='basic'
export CONDA_STORE_USERNAME='username'
export CONDA_STORE_PASSWORD='password'
export REACT_APP_API_URL='http://localhost:8080/conda-store/'
export REACT_APP_AUTH_METHOD='cookie'
export REACT_APP_LOGIN_PAGE_URL='http://localhost:8080/conda-store/login?next='
export REACT_APP_STYLE_TYPE='green-accent'
export REACT_APP_CONTEXT='webapp'
export REACT_APP_SHOW_AUTH_BUTTON='true'
export REACT_APP_LOGOUT_PAGE_URL='http://localhost:8080/conda-store/logout?next=/'
export YARN_ENABLE_IMMUTABLE_INSTALLS='false'

python test/playwright/test_ux.py
# pytest -rfxs test/playwright/test_ux.py -vvv --capture=no

• the tests can be run by calling python directly, which I recommend doing since it gives more informative messages (it's a pytest limitation related to fixtures)
• note: if you're running without X, such as on a remote dev machine, you might see an error like this:

╔════════════════════════════════════════════════════════════════════════════════════════════════╗
║ Looks like you launched a headed browser without having a XServer running.                     ║
║ Set either 'headless: true' or use 'xvfb-run <your-playwright-app>' before running Playwright. ║
║                                                                                                ║
║ <3 Playwright Team                                                                             ║
╚════════════════════════════════════════════════════════════════════════════════════════════════╝

• just edit the test file like this:

diff --git a/test/playwright/test_ux.py b/test/playwright/test_ux.py
index dcf0782..ab7c42f 100644
--- a/test/playwright/test_ux.py
+++ b/test/playwright/test_ux.py
@@ -306,7 +306,7 @@ if __name__ == "__main__":
     # Use playwright.chromium, playwright.firefox or playwright.webkit
     # Pass headless=False to launch() to see the browser UI
     # slow_mo adds milliseconds to each playwright command so humans can follow along
-    browser = playwright.chromium.launch(headless=False, slow_mo=500)
+    browser = playwright.chromium.launch(headless=True, slow_mo=500)
     page = browser.new_page()

     # Go to http://localhost:{server_port}

• note: additionally, it might also ask you to install playwright first
• once you know your env is working, you can try via pytest

I'd also add that these tests are passing on CI. So if there are any problems, make sure you have no other instances of conda-store running, etc.