misc: update a few cypress types + convert internal driver tests to TypeScript #31055

jennifer-shehane · 2025-02-07T18:15:29Z

Additional details

Converting some driver tests to TypeScript (more to come!).

It's interesting because I'm finding our own types that we expose to users and our internal ones are not ideal to work with ourselves.

This looks like a lot of changes, but it's mostly guarding against possible undefined variables or being more specific around an HTML Element type so that we can call a method that's available on that element.

Steps to test

Tests should pass

PR Tasks

Have tests been added/updated?
Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?

…ypeScript

jennifer-shehane · 2025-02-07T18:17:00Z

cli/types/cypress.d.ts

@@ -756,8 +756,10 @@ declare namespace Cypress {
      getCoordsByPosition(left: number, top: number, xPosition?: string, yPosition?: string): number
      getElementPositioning(element: JQuery | HTMLElement): ElementPositioning
      getElementAtPointFromViewport(doc: Document, x: number, y: number): Element | null
-      getElementCoordinatesByPosition(element: JQuery | HTMLElement, position: string): ElementCoordinates
+      getElementCoordinatesByPosition(element: JQuery | HTMLElement, position?: string): ElementCoordinates


position is optional

jennifer-shehane · 2025-02-07T18:17:46Z

cli/types/cypress.d.ts

+      getHostContenteditable(element: HTMLElement): HTMLElement
+      getSelectionBounds(element: HTMLElement): { start: number, end: number }


its pretty strange that we make all of these methods public, but - that's how it's setup, so I added additional types in the public types although they're undocumented.

jennifer-shehane · 2025-02-07T18:19:03Z

packages/driver/cypress/e2e/commands/actions/check.cy.ts

@@ -167,7 +168,14 @@ describe('src/cy/commands/actions/check', () => {
    it('can forcibly click even when being covered by another element', () => {
      const checkbox = $('<input type=\'checkbox\' />').attr('id', 'checkbox-covered-in-span').prependTo($('body'))

-      $('<span>span on checkbox</span>').css({ position: 'absolute', left: checkbox.offset().left, top: checkbox.offset().top, padding: 5, display: 'inline-block', backgroundColor: 'yellow' }).prependTo($('body'))
+      $('<span>span on checkbox</span>')


This kept erroring not wanting the object.

jennifer-shehane · 2025-02-07T18:20:08Z

packages/driver/cypress/e2e/commands/actions/click.cy.ts

@@ -282,7 +283,7 @@ describe('src/cy/commands/actions/click', () => {
      const button = cy.$$('#button')

      cy.get('#button').click().then(($button) => {
-        expect($button).to.match(button)
+        expect($button[0]).to.eq(button[0])


to.match is only meant to compare via Regex, but we were using this in a lot of places to check equality of elements. It did seem to be passing anyways somehow.

jennifer-shehane · 2025-02-07T18:20:34Z

packages/driver/cypress/e2e/commands/actions/click.cy.ts

@@ -556,7 +557,7 @@ describe('src/cy/commands/actions/click', () => {
      attachMouseHoverListeners({ btn, span })

      btn.html('')
-      btn.attr('disabled', true)
+      btn.prop('disabled', true)


disabled with value should be set via prop

packages/driver/cypress/e2e/commands/actions/scroll.cy.ts

jennifer-shehane · 2025-02-07T18:23:32Z

packages/driver/cypress/e2e/commands/actions/trigger.cy.ts

@@ -1280,7 +1282,7 @@ describe('src/cy/commands/actions/trigger', () => {
          const { lastLog } = this
          const { fromElWindow } = Cypress.dom.getElementCoordinatesByPosition($btn)

-          expect(lastLog.get('coords')).to.deep.eq(fromElWindow, 'x', 'y')
+          expect(lastLog.get('coords')).to.deep.eq(fromElWindow)


This doesn't accept more than 1 argument and what even were these extra arguments doing - nothing...

jennifer-shehane · 2025-02-07T18:24:25Z

packages/driver/cypress/e2e/commands/actions/type.cy.ts

@@ -766,6 +772,7 @@ describe('src/cy/commands/actions/type - #type', () => {
      .then(() => {
        expect(cy.timeout).to.be.calledWith(5 * 8, true, 'type')

+        // @ts-expect-error - TODO: Get this to use the internal Keyboard types


I have no idea why some specfiles don't seem to be picking up the internal types I defined for some Cypress definitions.

jennifer-shehane · 2025-02-07T18:25:08Z

packages/driver/cypress/e2e/commands/actions/type.cy.ts

+      // @ts-expect-error - TODO: Not sure how to handle this
      const spyTableName = cy.spy(top.console, 'group')
+      // @ts-expect-error - TODO: Not sure how to handle this


Just complaining that window doesn't have console on it.

jennifer-shehane · 2025-02-07T18:26:21Z

packages/driver/cypress/support/index.d.ts

+/// <reference types="chai-subset" />
+/// <reference types="cypress" />
+
+/// <reference path="../../types/internal-types.d.ts" />


I have a feeling there's something extra I need to do to get our internal types in our cypress tests. Sometimes they work and sometimes they don't though.

jennifer-shehane · 2025-02-07T18:26:48Z

packages/driver/cypress/support/utils.ts

+export const expectCaret = (start: number) => {
  return ($el) => {
-    end = end == null ? start : end
-    // @ts-ignore
+    const end = start
+
    expect(Cypress.dom.getSelectionBounds($el.get(0))).to.deep.eq({ start, end })
  }


This function is never called with a second argument in our code

jennifer-shehane · 2025-02-07T18:27:18Z

packages/driver/src/cy/commands/actions/type.ts

-  _log?: Log
-  ensure?: object
-}
-


Moved to internal types file

…ress-io/cypress into ts-to-js-driver-action-tests

cypress · 2025-02-07T19:35:57Z

cypress Run #60341

Run Properties: Passed #60341 • eed2629a7b: Merge branch 'develop' into ts-to-js-driver-action-tests

Project	`cypress`
Branch Review	`ts-to-js-driver-action-tests`
Run status	`Passed #60341`
Run duration	`17m 53s`
Commit	`eed2629a7b: Merge branch 'develop' into ts-to-js-driver-action-tests`
Committer	`Jennifer Shehane`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`6`
Pending	`1099`
Skipped	`0`
Passing	`26542`
View all changes introduced in this branch ↗︎

UI Coverage `45.56%`
Untested elements	`191`
Tested elements	`164`

Accessibility `92.54%`
Failed rules	`3 critical` `8 serious` `2 moderate` `2 minor`
Failed elements	`890`

jennifer-shehane · 2025-02-10T19:14:50Z

cli/types/cypress.d.ts

@@ -2556,6 +2558,8 @@ declare namespace Cypress {
     *    expect(s).to.have.been.calledOnce
     */
    withArgs(...args: any[]): Omit<A, 'withArgs'> & Agent<A>
+
+    callsFake(func: (...args: any[]) => any): Omit<A, 'withArgs'> & Agent<A>


There's a lot of methods that aren't extended from Sinon here. I added this one because our code was erroring trying to chain .as() off of cy.stub().callsFake()

jennifer-shehane · 2025-02-10T19:15:04Z

cli/types/cypress.d.ts

@@ -3695,7 +3693,7 @@ declare namespace Cypress {
     *
     * @default 0
     */
-    duration: number
+    duration: number | string


string works actually, we convert it

jennifer-shehane · 2025-02-10T19:15:40Z

cli/types/cypress.d.ts

@@ -3986,6 +3984,11 @@ declare namespace Cypress {
    decode: boolean
  }

+  /** Options to change the default behavior of .readFile */
+  interface ReadFileOptions extends Loggable {
+    encoding: Encodings


This option is valid and we handle it, not sure why its not documented.

…ress-io/cypress into ts-to-js-driver-action-tests

AtofStryker · 2025-02-10T21:18:57Z

packages/driver/cypress/e2e/commands/actions/type_special_chars.cy.ts

@@ -557,7 +568,9 @@ describe('src/cy/commands/actions/type - #type special chars', () => {
      cy.get('[contenteditable]:first').invoke('text', 'ab')
      .type('{moveToStart}')
      .then(($el) => {


what type winds up coming through here, HTMLElement? Wonder if typing here prevents the unknown?

Yah, just an HTMLElement, but also we don't know! so you have to convert to unknown first. In order to call .getSelection, it HAS to know that it's an HTMLInputElement. I almost feel like our own cypress types could be better about the type that it's passing through chaining that could help with this, but that sounds complex.

misc: update a few cypress types + convert internal driver tests to T…

7c5c314

…ypeScript

jennifer-shehane changed the title ~~misc: update a few cypress types + convert internal driver tests to T…~~ misc: update a few cypress types + convert internal driver tests to TypeScript Feb 7, 2025

Merge branch 'develop' into ts-to-js-driver-action-tests

0b808f3

jennifer-shehane self-assigned this Feb 7, 2025

jennifer-shehane commented Feb 7, 2025

View reviewed changes

packages/driver/cypress/e2e/commands/actions/scroll.cy.ts Outdated Show resolved Hide resolved

Update packages/driver/cypress/e2e/commands/actions/scroll.cy.ts

cea1a4f

jennifer-shehane commented Feb 7, 2025

View reviewed changes

packages/driver/src/cy/commands/actions/type.ts

_log?: Log

ensure?: object

}

Copy link

Member Author

jennifer-shehane Feb 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to internal types file

jennifer-shehane added 3 commits February 7, 2025 13:30

add changelog entry

5bc60db

Merge branch 'ts-to-js-driver-action-tests' of https://github.com/cyp…

911cfac

…ress-io/cypress into ts-to-js-driver-action-tests

bump circle cache?

4b6ab7b

More type fixes

a3e899b

jennifer-shehane commented Feb 10, 2025

View reviewed changes

jennifer-shehane added 4 commits February 10, 2025 14:16

Merge branch 'develop' into ts-to-js-driver-action-tests

2d55425

fix some more

7bdc6e8

Make the values numbers

309b1b1

Merge branch 'ts-to-js-driver-action-tests' of https://github.com/cyp…

63dd465

…ress-io/cypress into ts-to-js-driver-action-tests

AtofStryker reviewed Feb 10, 2025

View reviewed changes

Merge branch 'develop' into ts-to-js-driver-action-tests

eed2629

jennifer-shehane requested a review from AtofStryker February 13, 2025 22:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

misc: update a few cypress types + convert internal driver tests to TypeScript #31055

misc: update a few cypress types + convert internal driver tests to TypeScript #31055

jennifer-shehane commented Feb 7, 2025 •

edited

Loading

jennifer-shehane Feb 7, 2025

jennifer-shehane Feb 7, 2025

jennifer-shehane Feb 7, 2025 •

edited

Loading

jennifer-shehane Feb 7, 2025

jennifer-shehane Feb 7, 2025

jennifer-shehane Feb 7, 2025

jennifer-shehane Feb 7, 2025

jennifer-shehane Feb 7, 2025

jennifer-shehane Feb 7, 2025

jennifer-shehane Feb 7, 2025

jennifer-shehane Feb 7, 2025

cypress bot commented Feb 7, 2025 •

edited

Loading

jennifer-shehane Feb 10, 2025

jennifer-shehane Feb 10, 2025

jennifer-shehane Feb 10, 2025

AtofStryker Feb 10, 2025

jennifer-shehane Feb 11, 2025

		getHostContenteditable(element: HTMLElement): HTMLElement
		getSelectionBounds(element: HTMLElement): { start: number, end: number }

misc: update a few cypress types + convert internal driver tests to TypeScript #31055

Are you sure you want to change the base?

misc: update a few cypress types + convert internal driver tests to TypeScript #31055

Conversation

jennifer-shehane commented Feb 7, 2025 • edited Loading

Additional details

Steps to test

PR Tasks

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jennifer-shehane Feb 7, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cypress bot commented Feb 7, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jennifer-shehane commented Feb 7, 2025 •

edited

Loading

jennifer-shehane Feb 7, 2025 •

edited

Loading

cypress bot commented Feb 7, 2025 •

edited

Loading