mcp-playwright icon indicating copy to clipboard operation
mcp-playwright copied to clipboard

Published 20 hours ago • verified publisher icon executeautomation

added new tools for codegeneration while performing the rest tools

Open dreamquality opened this issue 8 months ago • 12 comments

image We can request new tools for recording performed actions and generate code based on them.

Use case: Generate code based on the next actions:

  1. Go to google.com
  2. fill Alex
  3. Verify Alex is in the input

Result: New spec file is created

dreamquality avatar Mar 23 '25 03:03 dreamquality

https://github.com/user-attachments/assets/d323724a-5949-4bc6-9b2f-ff6be18cee49

dreamquality avatar Mar 23 '25 11:03 dreamquality

@dreamquality - There are some conflicts in the branch, can you please have a look

but I like the way the code is written and it looks great.

I have few questions though, but I will wait for the conflicts being resolved

Thanks

executeautomation avatar Mar 23 '25 21:03 executeautomation

@executeautomation Done, please feel free to reach out with any features or ideas

dreamquality avatar Mar 24 '25 10:03 dreamquality

https://github.com/user-attachments/assets/79937bb2-f536-4c2f-9ad3-e5a116651fd1

dreamquality avatar Mar 24 '25 11:03 dreamquality

The feature looks awesome and I love the way you have written it @dreamquality , it will be very useful and handy feature for the community who are going to use this tool

Thanks for the contribution!

executeautomation avatar Mar 24 '25 15:03 executeautomation

Thank you for the warm words, I found some places of improvement, gonna send them in the next PR 😄

dreamquality avatar Mar 24 '25 17:03 dreamquality

Test are failing at the moment @dreamquality, can you please check them

image

Thanks again !

executeautomation avatar Mar 24 '25 22:03 executeautomation

preview.mov

@dreamquality This looks great. I have 2 questions:

  • Can we use the semantic way to locate elements (e.g., getByRole, getByText, etc.) which is the best practice by playwright instead of using XPath?
  • From the video, it seems the recording is running in the auto-run mode. How can auto-run mode work for the mcp tool in Cursor? Could you share the instructions for this which would be really great in this case?

Thanks a lot!

jiawei-wang-SH avatar Mar 25 '25 02:03 jiawei-wang-SH

  • it seems the recording is running in the auto-run mode. How can auto-run mode work for the mcp tool in Cursor? Could you share the instructions for this which would be really great in this case? Hi,
  1. More semantic way of location elements will be sent in the next PR, thank you in advance)
  2. Hers is a list of some examples:

Insctruction: 1. PREPARATION:

  • Plan your test steps before starting
  • Identify all selectors needed
  • Have test data ready

2. DURING RECORDING:

  • Use precise selectors
  • Include wait conditions when needed
  • Add verification steps
  • Keep actions atomic and clear

3. AFTER RECORDING:

  • Review generated code
  • Add additional assertions if needed
  • Verify selectors are stable
  • Test the generated script

Real-world example:

Please automate this test sequence:

  1. Start recording:

    • Output: "./tests/e2e"
    • Prefix: "LoginFlow"
    • Comments: yes

  2. Steps:

    • Navigate to https://example.com/login
    • Fill username field (#username) with "testuser"
    • Fill password field (#password) with "testpass123"
    • Click login button (#submit-btn)
    • Verify redirect to dashboard

  3. Generate test file

Example prompt template:

I want to create an automated test with the following steps:

  1. Start recording with these settings:

    • Save tests in: [specify output directory]
    • Test name prefix: [your prefix]
    • Include descriptive comments: yes/no

  2. Perform these actions:

    • Go to website: [URL]
    • Find element: [describe element]
    • Action to take: [click/fill/hover/etc]
    • Expected result: [what should happen] [Add more steps as needed]

  3. End recording and generate test file

dreamquality avatar Mar 25 '25 08:03 dreamquality

  • it seems the recording is running in the auto-run mode. How can auto-run mode work for the mcp tool in Cursor? Could you share the instructions for this which would be really great in this case? Hi,
  1. More semantic way of location elements will be sent in the next PR, thank you in advance)
  2. Hers is a list of some examples:

Insctruction: 1. PREPARATION:

  • Plan your test steps before starting
  • Identify all selectors needed
  • Have test data ready

2. DURING RECORDING:

  • Use precise selectors
  • Include wait conditions when needed
  • Add verification steps
  • Keep actions atomic and clear

3. AFTER RECORDING:

  • Review generated code
  • Add additional assertions if needed
  • Verify selectors are stable
  • Test the generated script

Real-world example:

Please automate this test sequence:

  1. Start recording:

    • Output: "./tests/e2e"
    • Prefix: "LoginFlow"
    • Comments: yes

  2. Steps:

    • Navigate to https://example.com/login
    • Fill username field (#username) with "testuser"
    • Fill password field (#password) with "testpass123"
    • Click login button (#submit-btn)
    • Verify redirect to dashboard

  3. Generate test file

Example prompt template:

I want to create an automated test with the following steps:

  1. Start recording with these settings:

    • Save tests in: [specify output directory]
    • Test name prefix: [your prefix]
    • Include descriptive comments: yes/no

  2. Perform these actions:

    • Go to website: [URL]
    • Find element: [describe element]
    • Action to take: [click/fill/hover/etc]
    • Expected result: [what should happen] [Add more steps as needed]

  3. End recording and generate test file

Thanks @dreamquality for your response. Could you instruct how you set the auto-run mode to get it work in your case? This is my setting for Cursor 0.47.8 on a ubuntu virtual machine, but the auto-run never works for me when calling the MCP tools. It just keeps asking me to run the tool for each tool call. image

jiawei-wang-SH avatar Mar 25 '25 11:03 jiawei-wang-SH

  • it seems the recording is running in the auto-run mode. How can auto-run mode work for the mcp tool in Cursor? Could you share the instructions for this which would be really great in this case? Hi,
  1. More semantic way of location elements will be sent in the next PR, thank you in advance)
  2. Hers is a list of some examples:

Insctruction: 1. PREPARATION:

  • Plan your test steps before starting
  • Identify all selectors needed
  • Have test data ready

2. DURING RECORDING:

  • Use precise selectors
  • Include wait conditions when needed
  • Add verification steps
  • Keep actions atomic and clear

3. AFTER RECORDING:

  • Review generated code
  • Add additional assertions if needed
  • Verify selectors are stable
  • Test the generated script

Real-world example: Please automate this test sequence:

  1. Start recording:

    • Output: "./tests/e2e"
    • Prefix: "LoginFlow"
    • Comments: yes

  2. Steps:

    • Navigate to https://example.com/login
    • Fill username field (#username) with "testuser"
    • Fill password field (#password) with "testpass123"
    • Click login button (#submit-btn)
    • Verify redirect to dashboard

  3. Generate test file

Example prompt template: I want to create an automated test with the following steps:

  1. Start recording with these settings:

    • Save tests in: [specify output directory]
    • Test name prefix: [your prefix]
    • Include descriptive comments: yes/no

  2. Perform these actions:

    • Go to website: [URL]
    • Find element: [describe element]
    • Action to take: [click/fill/hover/etc]
    • Expected result: [what should happen] [Add more steps as needed]

  3. End recording and generate test file

Thanks @dreamquality for your response. Could you instruct how you set the auto-run mode to get it work in your case? This is my setting for Cursor 0.47.8 on a ubuntu virtual machine, but the auto-run never works for me when calling the MCP tools. It just keeps asking me to run the tool for each tool call. image

looks like you have some caching issue, would be better to send recording... did you run it with GUI?

dreamquality avatar Mar 25 '25 15:03 dreamquality

Thank you once again @dreamquality , the tests are passing but the build is failing as you can see in the run below

Here is the error

npm error code EUSAGE npm error npm errornpm cican only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file withnpm install before continuing. npm error npm error Missing: @playwright/[email protected] from lock file npm error Invalid: lock file's [email protected] does not satisfy [email protected] npm error Missing: [email protected] from lock file npm error Missing: [email protected] from lock file npm error npm error Clean install a project npm error npm error Usage: npm error npm ci npm error npm error Options: npm error [--install-strategy <hoisted|nested|shallow|linked>] [--legacy-bundling] npm error [--global-style] [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]] npm error [--include <prod|dev|optional|peer> [--include <prod|dev|optional|peer> ...]] npm error [--strict-peer-deps] [--foreground-scripts] [--ignore-scripts] [--no-audit] npm error [--no-bin-links] [--no-fund] [--dry-run] npm error [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]] npm error [-ws|--workspaces] [--include-workspace-root] [--install-links] npm error npm error aliases: clean-install, ic, install-clean, isntall-clean npm error npm error Run "npm help ci" for more info npm error A complete log of this run can be found in: /home/runner/.npm/_logs/2025-03-25T17_58_28_429Z-debug-0.log

Can you please fix them, thanks @dreamquality

Thanks Karthik KK

executeautomation avatar Mar 25 '25 18:03 executeautomation

Looks perfect, now the code will made it to main branch 🎉

executeautomation avatar Mar 26 '25 03:03 executeautomation