diff --git a/js/apps/account-ui/src/oid4vci/Oid4Vci.tsx b/js/apps/account-ui/src/oid4vci/Oid4Vci.tsx
index 78283d8f3a..e516533014 100644
--- a/js/apps/account-ui/src/oid4vci/Oid4Vci.tsx
+++ b/js/apps/account-ui/src/oid4vci/Oid4Vci.tsx
@@ -105,7 +105,7 @@ export const Oid4Vci = () => {
                   <SelectOption
                     key={option}
                     value={option}
-                    data-testid="select-${option}"
+                    data-testid={option}
                   >
                     {option}
                   </SelectOption>
diff --git a/js/apps/account-ui/test/oid4vci/oid4vci.spec.ts b/js/apps/account-ui/test/oid4vci/oid4vci.spec.ts
new file mode 100644
index 0000000000..ec2b42fe89
--- /dev/null
+++ b/js/apps/account-ui/test/oid4vci/oid4vci.spec.ts
@@ -0,0 +1,20 @@
+import { expect, test } from "@playwright/test";
+import { login } from "../login";
+
+const realm = "verifiable-credentials";
+
+test.describe("Verifiable Credentials page", () => {
+  test("Get offer for test-credential.", async ({ page }) => {
+    await login(page, "test-user", "test", realm);
+
+    await expect(page.getByTestId("qr-code")).toBeHidden();
+
+    await page.getByTestId("oid4vci").click();
+    await page.getByTestId("menu-toggle").click();
+
+    await expect(page.getByTestId("verifiable-credential")).toBeVisible();
+    await expect(page.getByTestId("natural-person")).toBeVisible();
+    await page.getByTestId("natural-person").click();
+    await expect(page.getByTestId("qr-code")).toBeVisible();
+  });
+});