SYNC: fragment shots

e2e-tests/cypress/e2e/add-connection.cy.js

@@ -20,9 +20,15 @@ describe('Add connection', () => {
     cy.get('[data-testid=ConnectionDriverFields_displayName]').clear().type('test-mysql-1');
 
     // test connection
-    cy.get('[data-testid=ConnectionTab_buttonTest]').click();
+    cy.testid('ConnectionTab_buttonTest').click();
     cy.contains('Connected:');
 
+    cy.testid('ConnectionTab_tabSshTunnel').click();
+    cy.testid('ConnectionTab_tabControlContent').themeshot('fragment-connection-sshtunnel', { padding: 50 });
+
+    cy.testid('ConnectionTab_tabSsl').click();
+    cy.testid('ConnectionTab_tabControlContent').themeshot('fragment-connection-ssl', { padding: 50 });
+
     // save and connect
     cy.get('[data-testid=ConnectionTab_buttonSave]').click();
     cy.get('[data-testid=ConnectionTab_buttonConnect]').click();

packages/web/src/elements/TabControl.svelte

@@ -16,6 +16,7 @@
   export let isInline = false;
   export let containerMaxWidth = undefined;
   export let flex1 = true;
+  export let contentTestId = undefined;
 
   export function setValue(index) {
     value = index;
@@ -39,7 +40,7 @@
     {/if}
   </div>
 
-  <div class="content-container">
+  <div class="content-container" data-testid={contentTestId}>
     {#each _.compact(tabs) as tab, index}
       <div class="container" class:isInline class:tabVisible={index == value} style:max-width={containerMaxWidth}>
         <svelte:component this={tab.component} {...tab.props} tabControlHiddenTab={index != value} />

packages/web/src/tabs/ConnectionTab.svelte

@@ -239,6 +239,7 @@
       isInline
       containerMaxWidth="800px"
       flex1={false}
+      contentTestId="ConnectionTab_tabControlContent"
       tabs={[
         {
           label: 'General',