Add action to push screenshots to conda store

.github/workflows/push_images.yml

@@ -0,0 +1,112 @@
+# This workflow collects screenshots which have stored as artifacts in test.yml 
+# and opens a PR on conda-store to update the docs.
+#
+# There are two ways to trigger this workflow:
+# 1. Trigger by adding the `update_screenshots` label. 
+#    The workflow will run immediately after you add the label. It is
+#    also expecting artifacts which have been generated in test.yml. 
+#    Therefore, this cannot be triggered until test.yml is complete. 
+# 2. Trigger by workflow dispatch.
+#    Specify the PR number with the artifacts you'd like to use.
+#    Again, the test.yml workflow must be complete.
+# 3. By commenting on the PR `please update screenshots`.
+#
+# If a PR has already been opened on the conda-store repo from this
+# action, a rerun of this action will attempt to update the PR, not
+# create a new one. 
+
+name: Push screenshots to conda-store docs
+
+on:
+  pull_request:
+    types: [labeled]
+  issue_comment:
+    types: [created, edited]
+  workflow_dispatch:
+    inputs:
+      pr_number:
+        description: "PR Number with screenshots to push"
+        required: true
+
+jobs:
+  update_screenshots:
+    name: "update_screenshots"
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        shell: bash -el {0}
+    if: ${{ github.event.label.name == 'update_screenshots' && github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' || (github.event.issue.pull_request && contains(github.event.comment.body, 'please update screenshots')) }}
+    steps:
+      - name: "Checkout the conda-store repository 🛎"
+        uses: actions/checkout@v4
+        with:
+          path: conda-store-repo
+          repository: 'conda-incubator/conda-store'
+
+      - name: Use this PR number or the one specified in workflow dispatch
+        run: |
+          if [[ ${{ github.event_name == 'workflow_dispatch' }} == true ]]; then
+            my_variable=${{ inputs.pr_number }}
+          else
+            PR_NUMBER=${{github.event.pull_request.number}}
+          fi
+          echo "PR_NUMBER=$PR_NUMBER" >> $GITHUB_ENV
+
+      - name: Download artifact images - will fail if artifact doesn't exist yet
+        id: download-artifact
+        uses: dawidd6/action-download-artifact@v3
+        with:
+            #   Optional, GitHub token, a Personal Access Token with `public_repo` scope if needed
+            # Required, if the artifact is from a different repo
+            # Required, if the repo is private a Personal Access Token with `repo` scope is needed or GitHub token in a job where the permissions `action` scope set to `read`
+            github_token: ${{ secrets.GITHUB_TOKEN }}
+            # workflow file name from which to get the artifact
+            workflow: test.yml
+            # PR from which to get the artifact
+            pr: ${{ env.PR_NUMBER }}
+            # how to exit the action if no artifact is found
+            if_no_artifact_found: fail
+            # artifact name
+            name: 'screenshots'
+            # directory in which to put the contents of the artifact
+            path: 'screenshots'
+
+      - name: "ls"
+        run: |
+            ls
+            pwd
+            ls conda-store-repo
+
+      - name: "Copy images to other repo"
+        run: |
+            cd conda-store-repo
+            cp ../screenshots/*.png docusaurus-docs/conda-store-ui/images/.
+            git config user.name ${{ github.actor }}
+            git config user.email '${{ github.actor }}@users.noreply.github.com'
+            git add -A
+            git commit -m "commit all changes"
+
+      - name: "Create PR on conda-store with updated screenshots"
+        id: create-pull-request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.CONDA_STORE_SYNC }}
+          path: conda-store-repo
+          commit-message: Update screenshots
+          branch: update_screenshots
+          delete-branch: true
+          title: '[AUTO] Update screenshots'
+          body: |
+            Update screenshots
+            - Updated with the latest images from playwright generated in PR ${{ env.PR_NUMBER }}
+            - Auto-generated by [create-pull-request][1]
+
+            [1]: https://github.com/peter-evans/create-pull-request
+
+      - name: Comment back on the PR
+        if: ${{ steps.create-pull-request.outputs.pull-request-number }} && github.event_name == 'pull_request'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh api repos/${{ github.repository }}/issues/${{ env.PR_NUMBER }}/comments --raw-field 'body=A PR to conda-store has been opened with updated screenshots - ${{ steps.create-pull-request.outputs.pull-request-url }}'
+

.github/workflows/test.yml

@@ -57,11 +57,18 @@ jobs:
       - name: "Start web server and run tests"
         shell: bash -el {0}
         run: |
-          yarn run start & pytest --video on --output test-results --screenshots true test/playwright/test_ux.py
+          yarn run start & pytest --video on --output video --screenshots true test/playwright/test_ux.py
 
-      - name: "Upload artifacts"
+      - name: "Upload screenshot artifacts"
         uses: actions/upload-artifact@v3
         if: ${{ always() }}
         with:
-          name: playwright-tests
+          name: screenshots
           path: test-results
+
+      - name: "Upload video artifact"
+        uses: actions/upload-artifact@v3
+        if: ${{ always() }}
+        with:
+          name: video
+          path: video

.gitignore

@@ -152,6 +152,7 @@ src/version.ts
 
 # playwright screenshots
 static
+test-results/*
 
 # yarn
 

test/playwright/conftest.py

@@ -1,8 +1,5 @@
 import pytest
 
-from playwright.sync_api import expect
-
-
 
 def pytest_addoption(parser):
     parser.addoption("--screenshots", action="store", default="false")
@@ -13,3 +10,10 @@ def screenshot(pytestconfig):
         return False
     else:
         return True
+
+@pytest.fixture(scope="session")
+def browser_context_args(browser_context_args):
+    return {
+        **browser_context_args,
+        "record_video_dir": "video",
+    }

test/playwright/test_ux.py

@@ -48,24 +48,23 @@ def _login_sequence(page, screenshot=False):
         grab screenshots
     """
     # Log in sequence
+    if screenshot:
+        page.screenshot(path="test-results/login.png")
     # Click Login
     page.locator("text=Log in").click()
 
-    if screenshot:
-        page.screenshot(path="test-results/conda-store-login_screen.png")
-
     # Fill in the Username field
     page.locator('[placeholder="Username"]').fill("username")
 
     # Fill in the Password field
     page.locator('[placeholder="Password"]').fill("password")
 
+    if screenshot:
+        page.screenshot(path="test-results/authentication.png")
+
     with page.expect_navigation():
         page.locator('button:has-text("Sign In")').click()
 
-    if screenshot:
-        page.screenshot(path="test-results/conda-store-authenticated.png")
-
 
 def _create_new_environment(page, screenshot=False):
     """Workflow to create a new environment in the UI. The env will be 
@@ -89,40 +88,77 @@ def _create_new_environment(page, screenshot=False):
     # ensure new filename in case this test is run multiple times
     new_env_name = f'test_env_{random.randint(0, 100000)}' 
     # set timeout for building the environment
-    time_to_build_env = 2 * 60 * 1000  # 2 minutes in milliseconds
+    time_to_build_env = 3 * 60 * 1000  # 3 minutes in milliseconds
 
     # Create the new environment
     # click the + to create a new env
     page.get_by_label("Create a new environment in the username namespace").click()
     if screenshot:
-        page.screenshot(path="test-results/conda-store-new-env.png")
+        page.screenshot(path="test-results/create-new-env.png", clip={'x': 0, 'y': 145, 'width': 275, 'height': 50})
     # fill in the env name
     page.get_by_placeholder("Environment name").fill(new_env_name)
     # fill in the description
     page.get_by_placeholder("Enter here the description of your environment").fill("description")
+    if screenshot:
+        page.screenshot(path="test-results/add-package-button.png", clip={'x': 300, 'y': 385, 'width': 425, 'height': 170})
+        page.screenshot(path="test-results/name-description.png")
     # click the + to add a package
     page.get_by_role("button", name="+ Add Package").click()
     # add a package to the ui
     page.get_by_label("Enter package").fill("rich")
+    if screenshot:
+        page.screenshot(path="test-results/package-selection.png")
     page.get_by_role("option", name="rich", exact=True).click()
+
+    # add version spec
+    page.get_by_role("row", name="rich").get_by_role("button").first.click()
+
+    if screenshot:
+        page.screenshot(path="test-results/package-version-constraint.png")
+    page.get_by_role("option", name=">", exact=True).click()
+    # page.get_by_role("cell", name="> ​").get_by_role("button").nth(1).click()
+    page.get_by_role("cell", name=">").get_by_role("button").nth(1).click()
+    if screenshot:
+        page.screenshot(path="test-results/package-version-number.png")
+    page.get_by_role("option", name="12.5.1", exact=False).click()
+
     # open up the channels accordian card
     page.get_by_role("button", name="Channels").click()
     # click the + to add a channel
     page.get_by_role("button", name="+ Add Channel").click()
     # fill in conda-forge as the new channel name
     page.get_by_label("Enter channel").fill("conda-forge")
+    if screenshot:
+        page.screenshot(path="test-results/add-channel.png", clip={'x': 300, 'y': 440, 'width': 425, 'height': 202})
     # press enter to submit the channel to the list
     page.get_by_label("Enter channel").press("Enter")
+    # switch to yaml editor
+    page.get_by_label("YAML").click()
+    if screenshot:
+        page.screenshot(path="test-results/yaml-editor.png")
+    # switch back
+    page.get_by_label("GUI", exact=False).click()
+
+    if screenshot:
+        page.screenshot(path="test-results/create-button.png")
     # click create to start building the env
     page.get_by_role("button", name="Create", exact=True).click()
-    
+
     # Interact with the environment shortly after creation
     # click to open the Active environment dropdown manu
     page.get_by_role("button", name=" - Active", exact=False).click()
+    if screenshot:
+        page.keyboard.press("PageUp")  # ensure we are at the top of the page
+        page.screenshot(path="test-results/version-select.png")
     # click on the Active environment on the dropdown menu item (which is currently building)
     page.get_by_role("option", name=" - Active", exact=False).click()
+    if screenshot:
+        page.screenshot(path="test-results/version-select-done.png")
     # ensure that the environment is building
     expect(page.get_by_text("Building")).to_be_visible()
+    if screenshot:
+        page.keyboard.press("PageUp")  # ensure we are at the top of the page
+        page.screenshot(path="test-results/environment-building.png", clip={'x': 300, 'y': 190, 'width': 285, 'height': 100})
     # wait until the status is `Completed`
     completed = page.get_by_text("Completed", exact=False)
     completed.wait_for(state='attached', timeout=time_to_build_env)
@@ -145,9 +181,9 @@ def _close_environment_tabs(page):
         close_tab.first.click()
 
 
-def _existing_environment_interactions(page, env_name, time_to_build_env=3*60*1000, screenshot=False):
+def _existing_environment_interactions(page, env_name, time_to_build_env=4*60*1000, screenshot=False):
     """test interactions with existing environments. 
-    During this test, the test will be rebuilt twice. 
+    During this test, the env will be rebuilt twice. 
 
     Note: This test assumes the environment being tested is the one from 
     `_create_new_environment`. Changes to that method will require changes
@@ -168,12 +204,19 @@ def _existing_environment_interactions(page, env_name, time_to_build_env=3*60*10
     """
     # edit existing environment throught the YAML editor
     page.get_by_role("button", name=env_name).click()
+    if screenshot:
+        page.keyboard.press("PageUp")  # ensure we are at the top of the page
+        page.screenshot(path="test-results/edit-env.png")
     page.get_by_role("button", name="Edit").click()
+    if screenshot:
+        page.screenshot(path="test-results/switch-to-yaml.png", clip={'x': 280, 'y': 385, 'width': 985, 'height': 75})
+        page.keyboard.press("PageDown")  # ensure we are at the bottom of the page
+        page.screenshot(path="test-results/delete-env.png")
     page.get_by_label("YAML").check()
     if screenshot:
-        page.screenshot(path="test-results/conda-store-yaml-editor.png")
-    page.get_by_text("- rich").click()
-    page.get_by_text("channels: - conda-forgedependencies: - rich - pip: - nothing - ipykernel").fill("channels:\n  - conda-forge\ndependencies:\n  - rich\n  - python\n  - pip:\n      - nothing\n  - ipykernel\n\n")
+        page.screenshot(path="test-results/pip-section.png")
+    page.get_by_text("- rich").click() # bring focus to the section
+    page.get_by_text("channels: - conda-forgedependencies: - rich>12.5.1 - pip: - nothing - ipykernel").fill("channels:\n  - conda-forge\ndependencies:\n  - rich>12.5.1\n  - python\n  - pip:\n      - ragna\n  - ipykernel\n\n")
     page.get_by_role("button", name="Save").click()
     # wait until the status is `Completed`
     completed = page.get_by_text("Completed", exact=False)
@@ -270,7 +313,6 @@ def test_integration(page: Page, test_config, screenshot):
     # Go to http://localhost:{server_port}
     page.goto(test_config['base_url'], wait_until="domcontentloaded", timeout=4*60*1000)
 
-    page.screenshot(path="test-results/conda-store-unauthenticated.png")
     if screenshot:
         page.screenshot(path="test-results/conda-store-unauthenticated.png")
 
@@ -298,7 +340,7 @@ def test_integration(page: Page, test_config, screenshot):
         'password': CONDA_STORE_PASSWORD,
         'server_port': CONDA_STORE_SERVER_PORT,
     }
-    screenshot = False
+    screenshot = True
 
     # ########################################################################
     # Start playwright and setup
@@ -313,7 +355,7 @@ def test_integration(page: Page, test_config, screenshot):
     page.goto(config['base_url'], wait_until="domcontentloaded")
 
     # Log in to conda-store
-    _login_sequence(page)
+    _login_sequence(page, screenshot=screenshot)
 
     # create a new environment
     env_name = _create_new_environment(page, screenshot=screenshot)