Add some smoke-all test as screenshot tests are not working in CI yet

Author: cderv

tests/docs/smoke-all/table/appearance-bottom-cap.qmd

@@ -0,0 +1,96 @@
+---
+title: Table Appearance
+tbl-cap-location: bottom
+format: html
+_quarto:
+  tests: 
+    html:
+      ensureHtmlElements:
+        - ['table tbody tr.odd', 'table tbody tr.even']
+        - ['table tbody tr:not(.odd):not(.even)'] # All table should have .odd .even class for styling 
+---
+
+### Md table (w/caption) {#captioned}
+
+A short sentence that makes a paragraph.
+
+| Default | Left | Right | Center |
+|---------|:-----|------:|:------:|
+| 12      | 12   |    12 |   12   |
+| 123     | 123  |   123 |  123   |
+| 1       | 1    |     1 |   1    |
+
+: Demonstration of pipe table syntax
+
+### fancy table
+
+A short sentence that makes a paragraph.
+
+| fruit  | price  |
+|--------|--------|
+| apple  | 2.05   |
+| pear   | 1.37   |
+| orange | 3.09   |
+
+: Fruit prices {.striped .hover}
+
+
+### xref table
+
+A short sentence that makes a paragraph.
+
+| Col1 | Col2 | Col3 |
+|------|------|------|
+| A    | B    | C    |
+| E    | F    | G    |
+| A    | G    | G    |
+
+: My Caption {#tbl-letters}
+
+See @tbl-letters.
+
+### subtables
+
+A short sentence that makes a paragraph.
+
+::: {#tbl-panel layout-ncol=2}
+| Col1 | Col2 | Col3 |
+|------|------|------|
+| A    | B    | C    |
+| E    | F    | G    |
+| A    | G    | G    |
+
+: First Table {#tbl-first}
+
+| Col1 | Col2 | Col3 |
+|------|------|------|
+| A    | B    | C    |
+| E    | F    | G    |
+| A    | G    | G    |
+
+: Second Table {#tbl-second}
+
+Main Caption
+:::
+
+See @tbl-panel for details, especially @tbl-second.
+
+### HTML Table
+
+```{=html}
+<table>
+  <caption>As described in the section above, Quarto tables are great.</caption>
+  <thead>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+    <td>First Column</td>
+    <td>Second Column</td>
+    </tr>
+  </tbody>
+</table>
+```

tests/docs/smoke-all/table/appearance.qmd

@@ -1,6 +1,12 @@
 ---
 title: Table Appearance
 format: html
+_quarto:
+  tests: 
+    html:
+      ensureHtmlElements:
+        - ['table tbody tr.odd', 'table tbody tr.even'] 
+        - ['table tbody tr:not(.odd):not(.even)'] # All table should have .odd .even class for styling 
 ---
 
 ### With header
@@ -22,7 +28,7 @@ left 1       right 1
 left 2       right 2
 -----------  ------------
 
-### Md table (w/caption)
+### Md table (w/caption) {#captioned}
 
 A short sentence that makes a paragraph.
 
@@ -85,4 +91,24 @@ A short sentence that makes a paragraph.
 Main Caption
 :::
 
-See @tbl-panel for details, especially @tbl-second.
+See @tbl-panel for details, especially @tbl-second.
+
+### HTML Table
+
+```{=html}
+<table>
+  <caption>As described in the section above, Quarto tables are great.</caption>
+  <thead>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+    <td>First Column</td>
+    <td>Second Column</td>
+    </tr>
+  </tbody>
+</table>
+```

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

@@ -14,4 +14,4 @@ test('Markdown tables are styled correctly', async ({ page }) => {
 
   // Test with bottom caption
   await testTables(page, 'markdown-tables-cap-bottom.html');
-});
+});