misc: Add some missing types + Convert js driver/query tests to ts (#…

…31154)

* misc: Add some missing types + Convert js driver/query tests to ts

* changelog entry

* reuse partial

* Update cli/CHANGELOG.md

* Update call to querySelector to assign an identifier when checking for null

cli/CHANGELOG.md

@@ -11,6 +11,7 @@ _Released 2/25/2025 (PENDING)_
 
 - Viewport width, height, and scale now display in a badge above the application under test. The dropdown describing how to set viewport height and width has been removed from the UI. Additionally, component tests now show a notice about URL navigation being disabled in component tests. Addresses [#30999](https://github.com/cypress-io/cypress/issues/30999). Addressed in [#31119](https://github.com/cypress-io/cypress/pull/31119).
 - Updated types around `.readFile()` and `.scrollTo()` arguments and `Cypress.dom` methods. Addressed in [#31055](https://github.com/cypress-io/cypress/pull/31055).
+- Updated types around `.shadow()` and `.root()` options. Addressed in [#31154](https://github.com/cypress-io/cypress/pull/31154).
 
 **Dependency Updates:**
 

cli/types/cypress.d.ts

@@ -1898,7 +1898,7 @@ declare namespace Cypress {
      *
      * @see https://on.cypress.io/root
      */
-    root<E extends Node = HTMLHtmlElement>(options?: Partial<Loggable>): Chainable<JQuery<E>> // can't do better typing unless we ignore the `.within()` case
+    root<E extends Node = HTMLHtmlElement>(options?: Partial<LogTimeoutOptions>): Chainable<JQuery<E>> // can't do better typing unless we ignore the `.within()` case
 
     /**
      * Take a screenshot of the application under test and the Cypress Command Log.
@@ -1980,6 +1980,18 @@ declare namespace Cypress {
      */
     shadow(): Chainable<Subject>
 
+      /**
+     * Traverse into an element's shadow root.
+     *
+     * @example
+     *    cy.get('my-component')
+     *    .shadow({ timeout: 10000, log: false })
+     *    .find('.my-button')
+     *    .click()
+     * @see https://on.cypress.io/shadow
+     */
+    shadow(options?: Partial<LogTimeoutOptions>): Chainable<Subject>
+
     /**
      * Create an assertion. Assertions are automatically retried until they pass or time out.
      *
@@ -2732,6 +2744,7 @@ declare namespace Cypress {
 
   interface CheckClearOptions extends Loggable, Timeoutable, ActionableOptions { }
 
+  interface LogTimeoutOptions extends Loggable, Timeoutable { }
   /**
    * Object to change the default behavior of .click().
    */

packages/driver/cypress/component/spec.cy.js → packages/driver/cypress/component/spec.cy.ts

@@ -1,7 +1,6 @@
 const { sinon } = Cypress
 
 describe('component testing', () => {
-  /** @type {Cypress.Agent<sinon.SinonSpy>} */
   let uncaughtExceptionStub
 
   before(() => {
@@ -16,7 +15,11 @@ describe('component testing', () => {
 
   beforeEach(() => {
     uncaughtExceptionStub.resetHistory()
-    document.querySelector('[data-cy-root]').innerHTML = ''
+    const root = document.querySelector('[data-cy-root]')
+
+    if (root) {
+      root.innerHTML = ''
+    }
   })
 
   it('fails and shows an error', () => {
@@ -28,7 +31,7 @@ describe('component testing', () => {
       throw new Error('An error!')
     })
 
-    document.querySelector('[data-cy-root]').appendChild($el)
+    document.querySelector('[data-cy-root]')?.appendChild($el)
     cy.get('button').click().then(() => {
       expect(uncaughtExceptionStub).to.have.been.calledOnceWithExactly(null)
       expect(Cypress.log).to.be.calledWithMatch(sinon.match({ 'message': `Error: An error!`, name: 'uncaught exception' }))
@@ -40,11 +43,12 @@ describe('component testing', () => {
     const $el = document.createElement('button')
 
     $el.innerText = `Don't click it!`
+    // @ts-expect-error - testing an error state
     $el.addEventListener('click', new Promise((_, reject) => {
       reject('Promise rejected with a string!')
     }))
 
-    document.querySelector('[data-cy-root]').appendChild($el)
+    document.querySelector('[data-cy-root]')?.appendChild($el)
     cy.get('button').click().then(() => {
       expect(uncaughtExceptionStub).to.have.been.calledOnceWithExactly(null)
       expect(Cypress.log).to.be.calledWithMatch(sinon.match({ 'message': `Error: "Promise rejected with a string!"`, name: 'uncaught exception' }))

packages/driver/cypress/e2e/commands/querying/focused.cy.js → packages/driver/cypress/e2e/commands/querying/focused.cy.ts

@@ -1,4 +1,4 @@
-const { assertLogLength } = require('../../../support/utils')
+import { assertLogLength } from '../../../support/utils'
 
 const { _ } = Cypress