add studio interactions tests

2026-05-25 10:19:30 -05:00 · 2025-10-14 12:15:48 -06:00
parent efcc12f4ac
commit 47a918e2ee
4 changed files with 118 additions and 1 deletions
@@ -0,0 +1,53 @@
+import { launchStudio } from './helper'
+
+describe('Cypress Studio Interactions', () => {
+  beforeEach(() => {
+    launchStudio({ specName: 'dom-interactions.cy.js' })
+  })
+
+  it('supprts interactions with radio buttons', () => {
+    cy.getAutIframe().within(() => {
+      cy.get('#radio-1').realClick()
+    })
+
+    cy.get('.cm-line').should('contain.text', `cy.get('#radio-1').check();`)
+  })
+
+  it('supprts interactions with checkboxes', () => {
+    cy.getAutIframe().within(() => {
+      cy.get('#check-target').realClick()
+    })
+
+    cy.get('.cm-line').should('contain.text', `cy.get('[name="check"]').check();`)
+  })
+
+  it('supprts interactions with select elements', () => {
+    cy.getAutIframe().within(() => {
+      cy.get('#select-target').select('2')
+    })
+  })
+
+  it('supprts interactions with multiple select elements', () => {
+    cy.getAutIframe().within(() => {
+      cy.get('#select-target-multi').select(['1', '2'])
+    })
+  })
+
+  it('supprts interactions with text elements', () => {
+    cy.getAutIframe().within(() => {
+      cy.get('#text-target').type('hello world!')
+    })
+  })
+
+  it('supprts interactions with content editable elements', () => {
+    cy.getAutIframe().within(() => {
+      cy.get('#content-editable-input').type('hello world!')
+    })
+  })
+
+  it('supprts interactions with textarea elements', () => {
+    cy.getAutIframe().within(() => {
+      cy.get('#area-target').type('hello world!')
+    })
+  })
+})
@@ -106,7 +106,7 @@
          :id="getIdIfDirectory(row)"
          :key="row.index"
          :data-cy="row.data.isLeaf ? 'spec-list-file' : 'spec-list-directory'"
-          :data-cy-row="row.data.data?.baseName"
+          :data-cy-row="row.data.isLeaf ? row.data.data?.baseName : row.data.name"
          :is-leaf="row.data.isLeaf"
          :is-project-connected="projectConnectionStatus === 'CONNECTED'"
          :grid-columns="row.data.isLeaf ? tableGridColumns : 'grid-cols-[1fr]'"
@@ -0,0 +1,5 @@
+describe('studio functionality', () => {
+  it('visits a basic html page', () => {
+    cy.visit('cypress/e2e/dom-interactions.html')
+  })
+})
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DOM with Browser Interactions Fixture</title>
+  </head>
+  <body>
+    <div id="dom">
+      <h1>DOM with Browser Interactions Fixture</h1>
+      <p>Fixture for browser interaction tests.</p>
+      <button id="button-target">Button</button>
+      <input type="text" id="text-target" placeholder="Input text">
+      <input type="date" id="date-target" placeholder="Input date">
+      <select name="select" id="select-target">
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <optgroup label="Grouped">
+          <option value="3">Three</option>
+        </optgroup>
+      </select>
+      <select name="select-multi" id="select-target-multi" multiple>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <optgroup label="Grouped">
+          <option value="3">Three</option>
+        </optgroup>
+      </select>
+      <div>
+        <input type="radio" name="radio-inputs" id="radio-1" />
+        <input type="radio" name="radio-inputs" id="radio-2" />
+      </div>
+      <input type="checkbox" name="check" id="check-target" />
+      <textarea id="area-target"></textarea>
+      <div id="shadow-host" style="border: 1px solid #999; padding: 20px; margin: 20px 0;"></div>
+      <iframe
+        srcdoc="<div>I am an iframe</div><input type='text' id='iframe-input' placeholder='Iframe Input'>"
+      ></iframe>
+      <div>
+        <label for="content-editable-input">Content Editable Input</label>
+        <br />
+        <div
+          id="content-editable-input"
+          contenteditable="true"
+        ></div>
+      </div>
+      <div style="height:1000px; position: relative;">
+        <div id="scroll-target-window" style="position:absolute;bottom:0px;height:100px;width:100px;overflow:scroll;background:#ccc">
+          <div id="spacer" style="height:100px;width:100px;background:#cff"></div>
+          <div id="scroll-target-element" style="background:#fcf;height:100px;width:100px;margin-left:100px;"></div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      const shadowHost = document.getElementById('shadow-host')
+      const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+      shadowRoot.innerHTML = '<input type="text" id="shadow-input" placeholder="Shadow DOM Input">'
+    </script>
+  </body>
+</html>