try and make test more robust (#1638)

* try and make test more robust

* unused import

* add logging

* fix bug in export test

* Revert "unused import"

This reverts commit 0fb7090eca.

* revert more

* more fixes

* fix

* ultra snapshot test

* Revert "ultra snapshot test"

This reverts commit 17a883727e.

e2e/playwright/snapshot-tests.spec.ts

@@ -32,7 +32,6 @@ test.beforeEach(async ({ context, page }) => {
 test.setTimeout(60_000)
 
 test('exports of each format should work', async ({ page, context }) => {
-  test.setTimeout(120_000)
   // FYI this test doesn't work with only engine running locally
   // And you will need to have the KittyCAD CLI installed
   const u = getUtils(page)
@@ -100,20 +99,34 @@ const part001 = startSketchOn('-XZ')
     output: Models['OutputFormat_type']
   ): Promise<Paths> => {
     await page.getByRole('button', { name: APP_NAME }).click()
+    await expect(
+      page.getByRole('button', { name: 'Export Part' })
+    ).toBeVisible()
     await page.getByRole('button', { name: 'Export Part' }).click()
+    await expect(page.getByTestId('command-bar')).toBeVisible()
 
     // Go through export via command bar
     await page.getByRole('option', { name: output.type, exact: false }).click()
+    await page.locator('#arg-form').waitFor({ state: 'detached' })
     if ('storage' in output) {
+      await page.getByTestId('arg-name-storage').waitFor({ timeout: 1000 })
       await page.getByRole('button', { name: 'storage', exact: false }).click()
       await page
         .getByRole('option', { name: output.storage, exact: false })
         .click()
+      await page.locator('#arg-form').waitFor({ state: 'detached' })
     }
+    await expect(page.getByText('Confirm Export')).toBeVisible()
+
+    // Kick off export promise before triggering the download in case it downloads very quickly
+    // since playwright is puppets the browser, race conditions are much more acute,
+    // and since this export is a simple file the download can happen very quickly
+    const downloadPromise = page.waitForEvent('download')
     await page.getByRole('button', { name: 'Submit command' }).click()
 
     // Handle download
-    const download = await page.waitForEvent('download')
+    const download = await downloadPromise
+    const downloadPromise2 = page.waitForEvent('download')
     const downloadLocationer = (extra = '', isImage = false) =>
       `./e2e/playwright/export-snapshots/${output.type}-${
         'storage' in output ? output.storage : ''
@@ -123,7 +136,7 @@ const part001 = startSketchOn('-XZ')
 
     if (output.type === 'gltf' && output.storage === 'standard') {
       // wait for second download
-      const download2 = await page.waitForEvent('download')
+      const download2 = await downloadPromise2
       await download.saveAs(downloadLocation)
       await download2.saveAs(downloadLocation2)
 

src/components/CommandBar/CommandBar.tsx

@@ -146,6 +146,7 @@ export const CommandBar = () => {
           <WrapperComponent.Panel
             className="relative z-50 pointer-events-auto w-full max-w-xl py-2 mx-auto border rounded shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
             as="div"
+            data-testid="command-bar"
           >
             {commandBarState.matches('Selecting command') ? (
               <CommandComboBox options={commands} />

src/components/CommandBar/CommandBarHeader.tsx

@@ -1,6 +1,6 @@
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CustomIcon } from '../CustomIcon'
-import React, { ReactNode, useState } from 'react'
+import React, { useState } from 'react'
 import { ActionButton } from '../ActionButton'
 import { Selections, getSelectionTypeDisplayText } from 'lib/selections'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -108,7 +108,12 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
                         : 'bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80'
                     }`}
                   >
-                    <span className="capitalize">{argName}</span>
+                    <span
+                      data-testid={`arg-name-${argName.toLowerCase()}`}
+                      className="capitalize"
+                    >
+                      {argName}
+                    </span>
                     {argValue ? (
                       arg.inputType === 'selection' ? (
                         getSelectionTypeDisplayText(argValue as Selections)