Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'Codeless' UI test generation #884

Merged
merged 1 commit into from
Oct 1, 2024
Merged

Conversation

joeflack4
Copy link
Member

Changes

'Codeless' UI test generation

  • Add: Makefile commands to use 'playright codegen'
  • Add: New test file for N3C recommended (WIP)
  • Add: frontend/tests/utils.js (refactored func into here from another file)

termhub-vocab Outdated
Copy link
Member Author

Choose a reason for hiding this comment

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

IDK how/why this got committed again

## to write tests that are theoretically compatible in any environment (as long as the UI is the same). The only
## difference is that when the test code is written, the first line will hard-code the URL to that environment. So
## after recording, the code should be repuprosed in the style of frontend/tests/.
codegen-local:
Copy link
Member Author

@joeflack4 joeflack4 Sep 24, 2024

Choose a reason for hiding this comment

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

New "codeless test generation" commands

I added some documentation on how to use them and what they are in the makefile.

These are basically a wrapper for:
yarn playwright codegen URL

@@ -0,0 +1,13 @@
// UTILS
/* Used to convert input to be same as graphology serialization (all strings). */
function convertToArrayOfStrings(matrix) {
Copy link
Member Author

Choose a reason for hiding this comment

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

Refactored this func into a tests/utils.js file

Copy link
Member Author

Choose a reason for hiding this comment

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

New tests: WIP

Copy link
Member Author

Choose a reason for hiding this comment

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

General findings for "Codeless UI test generation"

It's not perfect. For example, I want to select something by ID or position... but when I click it using the recording feature, it gives me things like this instead:

await page.getByRole('row', { name: 'Expand Row CARDIOMYOPATHIES' })
await page.getByRole('link', { name: '12 removed , 12 added' }).click();

There are also some other caveats:

  1. When you copy/paste the code it generates into your test file, you should change the hard-coded URL to appUrl instead: await page.goto(appUrl);
  2. It doesn't write assertions for you. You have to do that yourself.
  3. As shown above, oftentimes what you want (select things by ID, position) is not what it does.

@joeflack4 joeflack4 force-pushed the codeless-ui-test-generation branch 2 times, most recently from 0608456 to 57b9bf4 Compare October 1, 2024 19:44
- Add: Makefile commands to use 'playright codegen'
- Add: New test file for N3C recommended (WIP)
- Add: frontend/tests/utils.js (refactored func into here from another file)
@joeflack4 joeflack4 marked this pull request as ready for review October 1, 2024 19:46
@joeflack4 joeflack4 merged commit 89388d1 into develop Oct 1, 2024
1 of 2 checks passed
@joeflack4 joeflack4 deleted the codeless-ui-test-generation branch October 1, 2024 19:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 5. Done
Development

Successfully merging this pull request may close these issues.

1 participant