how to bulk-update test selectors with a codemod

TL;DR

Write a jscodeshift transform that finds the old selector pattern and rewrites it to the new one, run it across the suite, and review the diff. Mechanical, reviewable, and repeatable.

Error

(Not an error; a technique. The need: the same selector change in 50 files.)

Steps

1. Define the pattern: for example, cy.get('.btn-primary') becomes cy.get('[data-cy=primary-button]'). Expected: a precise before/after.
2. Write the jscodeshift transform matching CallExpressions with the old argument. Expected: the transform file.
3. Run it on one file and inspect the diff. Expected: exactly the intended change.
4. Run across the suite: jscodeshift -t transform.js cypress/e2e. Expected: all files updated.
5. Review the full diff and run the suite. Expected: mechanical changes verified by tests.

When to use

• The same selector change in many files.
• Renaming page-object methods or helpers.

When not to use

• A handful of files (edit by hand).
• Semantic changes (the codemod cannot judge intent).

Tool compatibility

• jscodeshift; any JS-based test suite.

Variant phrasings

Codemod test selectors

The general technique.

Mass update Cypress selectors

The Cypress-specific case.

Why it happens

Selector changes are syntactic and repetitive. Codemods apply them uniformly without transcription errors.

Edge cases

• Test the transform on a copy first; codemods can over-match.
• Dynamic selectors (template strings) need manual review after the run.
• Commit the transform itself; the next migration reuses it.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_9dwlJmgxkcmJl-9BkW-X7A