Add a test for creating tabsets using jupyter cell

Author: cderv

tests/docs/playwright/html/tabsets/jupyter-tabsets.qmd

@@ -0,0 +1,25 @@
+---
+title: "mwe"
+---
+
+## Quarto
+
+From https://github.com/quarto-dev/quarto-cli/issues/1456
+
+```{python}
+from IPython.display import display, Markdown
+import matplotlib.pyplot as plt
+```
+
+::: {.panel-tabset}
+
+```{python}
+#| output: asis
+for i in ["tab1 inside for loop", "tab2 inside for loop"]:
+    display(Markdown(f"\n# {i}:\n"))
+    fig = plt.figure()
+    ax = fig.add_subplot(111)
+    plt.show()
+```
+
+:::

tests/integration/playwright/tests/html-tabsets.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test('Jupyter - Creates working tabsets from for loops', async ({ page }) => {
+  await page.goto('/html/tabsets/jupyter-tabsets.html');
+  const tab1 = page.getByRole('tab', { name: 'tab1 inside for loop:' });
+  await expect(tab1).toHaveClass(/active/);
+  const tabContent = page.locator('div.tab-content')
+  await expect(tabContent).toBeVisible();
+  const tab1Content = tabContent.locator('div.tab-pane').first(); 
+  await expect(tab1Content).toHaveClass(/active/);
+  await expect(tab1Content.locator('img')).toBeVisible();
+  const tab2 = page.getByRole('tab', { name: 'tab2 inside for loop:' })
+  await tab2.click();
+  await expect(tab1).not.toHaveClass(/active/);
+  await expect(tab1Content).not.toHaveClass(/active/);
+  await expect(tab2).toHaveClass(/active/);
+  const tab2Content = tabContent.locator('div.tab-pane').nth(1); 
+  await expect(tab2Content).toHaveClass(/active/);
+  await expect(tab2Content.locator('img')).toBeVisible();
+});