Copilot Pull Request Reviews For Testability

If you are using GitHub Copilot to review pull requests, you can give it specific instructions via .github/copilot-instructions.md. I confirmed that using either an explicit list with every item starting with When performing a code review, ... or a combined section works.

This works:

When performing a code review, confirm that there are no hard-coded magic numbers.
Prefer using named constants.

When performing a code review, do not allow unreachable code

When performing a code review, check each HTML element that shows any unique application data,
like prices, values, names, address, etc to have a `data-testid` attribute to be used in end-to-end tests.
If the attribute is missing, add a `data-testid` attribute with a meaningful value.
Also add `data-testid` attributes to the top level forms, pages, large components.

This also works:

When performing a code review:

- confirm that there are no hard-coded magic numbers.
  Prefer using named constants.
- do not allow unreachable code
- check each HTML element that shows any unique application data,
  like prices, values, names, address, etc to have a `data-testid` attribute
  to be used in end-to-end tests. If the attribute is missing,
  add a `data-testid` attribute with a meaningful value.
  Also add `data-testid` attributes to the top level forms, pages,
  large components.

Code review from VSCode

If you want to review the entire codebase, you can ask for the code review from VSCode using prompt like "review the code in this repo as if doing a pull request review". Here is the review that finds that index.html file has a DIV with missing data-testid attribute

Pull request review

If we open a pull request, and our Copilot plan has GitHun Copilot AI review included, we can assign an AI reviewer that will look at the source changes only. Following the Copilot instructions from the main branch, it can suggest similar fixes

You can see the Copilot code review in action in my video below

Missing tests

We saw how Copilot review can "catch" new HTML fields without meaningful test ids. Now let's ensure that we do not add testable HTML elements without any E2E tests. I have added the following Copilot pull request instruction:

- when modifying front-end code, check all elements with `data-testid` attributes
to ensure that there is at least 2 end-to-end Cypress tests in `cypress/e2e`
folder using those attributes.

Here is a pull request where I add a new "age" field. Copilot sees two data-testid elements and correctly detects that the data-testid=age element does NOT have any E2E specs that reference it. Nice!

Is Copilot pull request worth it? I think yes. It does catch easy omissions, ensuring that the front-end code is testable and tested.

🎓 For more practice information on using GitHub Copilot, check out my online course "Write Cypress Tests Using GitHub Copilot" available at https://cypress.tips/courses