fix: ensure listbox visibility before interacting with options in JWT editor. (#939)

Author: jonathanp-okta

e2e/decoder.spec.ts

@@ -122,6 +122,7 @@ test.describe("Can generate JWT examples", () => {
       );
 
       await pickerIndicator.click();
+      await page.getByRole("listbox").waitFor({ state: "visible" });
     });
 
     const options = Object.keys(DefaultTokensValues);
@@ -138,7 +139,7 @@ test.describe("Can generate JWT examples", () => {
         expectToBeNonNull(lang);
 
         const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);
-        await page.getByRole("option", { name: option }).click();
+        await page.getByRole("listbox").getByRole("option", { name: option }).click();
 
         const targetToken = DefaultTokensValues[option];
 

e2e/encoder.spec.ts

@@ -242,6 +242,7 @@ test.describe("Generate JWT encoding examples", () => {
       );
 
       await pickerIndicator.click();
+      await page.getByRole("listbox").waitFor({ state: "visible" });
     });
 
     const options = Object.keys(DefaultTokensValues);
@@ -255,7 +256,7 @@ test.describe("Generate JWT encoding examples", () => {
         }
 
         const encoder = page.getByTestId(dataTestidDictionary.encoder.id);
-        await page.getByRole("option", { name: option }).click();
+        await page.getByRole("listbox").getByRole("option", { name: option }).click();
 
         const jwtOutput = encoder
           .getByTestId(dataTestidDictionary.encoder.jwt.id)