feat: Improve clicking with modifiers. (#8114)

Co-authored-by: Jennifer Shehane <jennifer@cypress.io>
cypress-io · Aug 10, 2020 · 26f6228 · 26f6228 · cypress-bot · Aug 10, 2020
1 parent 1690d41
commit 26f6228
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 1 deletion.
diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
@@ -2319,6 +2319,54 @@ declare namespace Cypress {
      * @default false
      */
     multiple: boolean
+    /**
+     * Activates the control key during click
+     *
+     * @default false
+     */
+    ctrlKey: boolean
+    /**
+     * Activates the control key during click
+     *
+     * @default false
+     */
+    controlKey: boolean
+    /**
+     * Activates the alt key (option key for Mac) during click
+     *
+     * @default false
+     */
+    altKey: boolean
+    /**
+     * Activates the alt key (option key for Mac) during click
+     *
+     * @default false
+     */
+    optionKey: boolean
+    /**
+     * Activates the shift key during click
+     *
+     * @default false
+     */
+    shiftKey: boolean
+    /**
+     * Activates the meta key (Windows key or command key for Mac) during click
+     *
+     * @default false
+     */
+    metaKey: boolean
+    /**
+     * Activates the meta key (Windows key or command key for Mac) during click
+     *
+     * @default false
+     */
+    commandKey: boolean
+    /**
+     * Activates the meta key (Windows key or command key for Mac) during click
+     *
+     * @default false
+     */
+    cmdKey: boolean
   }
 
   interface ResolvedConfigOptions {

diff --git a/cli/types/tests/chainer-examples.ts b/cli/types/tests/chainer-examples.ts
@@ -467,6 +467,9 @@ cy.writeFile('../file.path', '', {
 })
 
 cy.get('foo').click()
+cy.get('foo').click({
+  ctrlKey: true,
+})
 cy.get('foo').rightclick()
 cy.get('foo').dblclick()
 

diff --git a/packages/driver/cypress/fixtures/issue-486.html b/packages/driver/cypress/fixtures/issue-486.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Issue 486</title>
+  </head>
+  <body>
+    <button id="button">modifier test</button>
+    <div id="result">Result</div>
+    <script type="text/javascript">
+      document.getElementById('button').addEventListener('click', (e) => {
+        const result = document.getElementById('result')
+
+        result.innerText = ''
+
+        if (e.ctrlKey) {
+          result.innerText += '{Ctrl}'
+        }
+
+        if (e.altKey) {
+          result.innerText += '{Alt}'
+        }
+
+        if (e.shiftKey) {
+          result.innerText += '{Shift}'
+        }
+
+        if (e.metaKey) {
+          result.innerText += '{Meta}'
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/packages/driver/cypress/integration/commands/actions/click_spec.js b/packages/driver/cypress/integration/commands/actions/click_spec.js
@@ -882,6 +882,105 @@ describe('src/cy/commands/actions/click', () => {
       })
     })
 
+    describe('modifier options', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/issue-486.html')
+      })
+
+      it('ctrl', () => {
+        cy.get('#button').click({
+          ctrlKey: true,
+        })
+
+        cy.get('#result').should('contain', '{Ctrl}')
+
+        // ctrl should be released
+        cy.get('#button').click()
+        cy.get('#result').should('not.contain', '{Ctrl}')
+
+        cy.get('#button').click({
+          controlKey: true,
+        })
+
+        cy.get('#result').should('contain', '{Ctrl}')
+      })
+
+      it('alt', () => {
+        cy.get('#button').click({
+          altKey: true,
+        })
+
+        cy.get('#result').should('contain', '{Alt}')
+
+        // alt should be released
+        cy.get('#button').click()
+        cy.get('#result').should('not.contain', '{Alt}')
+
+        cy.get('#button').click({
+          optionKey: true,
+        })
+
+        cy.get('#result').should('contain', '{Alt}')
+      })
+
+      it('shift', () => {
+        cy.get('#button').click({
+          shiftKey: true,
+        })
+
+        cy.get('#result').should('contain', '{Shift}')
+
+        // shift should be released
+        cy.get('#button').click()
+        cy.get('#result').should('not.contain', '{Shift}')
+      })
+
+      it('meta', () => {
+        cy.get('#button').click({
+          metaKey: true,
+        })
+
+        cy.get('#result').should('contain', '{Meta}')
+
+        // shift should be released
+        cy.get('#button').click()
+        cy.get('#result').should('not.contain', '{Meta}')
+
+        cy.get('#button').click({
+          commandKey: true,
+        })
+
+        cy.get('#result').should('contain', '{Meta}')
+
+        cy.get('#button').click({
+          cmdKey: true,
+        })
+
+        cy.get('#result').should('contain', '{Meta}')
+      })
+
+      it('multiple', () => {
+        cy.get('#button').click({
+          ctrlKey: true,
+          altKey: true,
+          shiftKey: true,
+          metaKey: true,
+        })
+
+        cy.get('#result').should('contain', '{Ctrl}')
+        cy.get('#result').should('contain', '{Alt}')
+        cy.get('#result').should('contain', '{Shift}')
+        cy.get('#result').should('contain', '{Meta}')
+
+        // modifiers should be released
+        cy.get('#button').click()
+        cy.get('#result').should('not.contain', '{Ctrl}')
+        cy.get('#result').should('not.contain', '{Alt}')
+        cy.get('#result').should('not.contain', '{Shift}')
+        cy.get('#result').should('not.contain', '{Meta}')
+      })
+    })
+
     describe('pointer-events:none', () => {
       beforeEach(function () {
         cy.$$('<div id="ptr" style="position:absolute;width:200px;height:200px;background-color:#08c18d;">behind #ptrNone</div>').appendTo(cy.$$('#dom'))

diff --git a/packages/driver/src/cy/commands/actions/click.js b/packages/driver/src/cy/commands/actions/click.js
@@ -34,7 +34,7 @@ const formatMouseEvents = (events) => {
 }
 
 module.exports = (Commands, Cypress, cy, state, config) => {
-  const { mouse } = cy.devices
+  const { mouse, keyboard } = cy.devices
 
   const mouseAction = (eventName, { subject, positionOrX, y, userOptions, onReady, onTable, defaultOptions }) => {
     let position
@@ -54,6 +54,14 @@ module.exports = (Commands, Cypress, cy, state, config) => {
       errorOnSelect: true,
       waitForAnimations: config('waitForAnimations'),
       animationDistanceThreshold: config('animationDistanceThreshold'),
+      ctrlKey: false,
+      controlKey: false,
+      altKey: false,
+      optionKey: false,
+      shiftKey: false,
+      metaKey: false,
+      commandKey: false,
+      cmdKey: false,
       ...defaultOptions,
     })
 
@@ -65,6 +73,24 @@ module.exports = (Commands, Cypress, cy, state, config) => {
       })
     }
 
+    const flagModifiers = (press) => {
+      if (options.ctrlKey || options.controlKey) {
+        keyboard.flagModifier({ key: 'Control' }, press)
+      }
+
+      if (options.altKey || options.optionKey) {
+        keyboard.flagModifier({ key: 'Alt' }, press)
+      }
+
+      if (options.shiftKey) {
+        keyboard.flagModifier({ key: 'Shift' }, press)
+      }
+
+      if (options.metaKey || options.commandKey || options.cmdKey) {
+        keyboard.flagModifier({ key: 'Meta' }, press)
+      }
+    }
+
     const perform = (el) => {
       let deltaOptions
       const $el = $dom.wrap(el)
@@ -158,8 +184,12 @@ module.exports = (Commands, Cypress, cy, state, config) => {
 
           const moveEvents = mouse.move(fromElViewport, forceEl)
 
+          flagModifiers(true)
+
           const onReadyProps = onReady(fromElViewport, forceEl)
 
+          flagModifiers(false)
+
           return createLog({
             moveEvents,
             ...onReadyProps,