Replies: 28 comments 42 replies
-
|
Is there any way to test this? I would love to give it a try! thanks! |
Beta Was this translation helpful? Give feedback.
-
|
@estefafdez We'll be releasing it behind an experimental flag very soon - this thread was made in anticipation so we could set up links. I'll ping here once it actually goes out |
Beta Was this translation helpful? Give feedback.
-
|
@estefafdez We've just released this feature behind an experimental flag in 6.3.0 - you can check out the docs here. |
Beta Was this translation helpful? Give feedback.
-
|
Some first reactions/feedback:
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the feedback! The selector problem ( Adding I'm not quite sure what you mean by step by step option - are you talking about the snapshot that displays when you hover over a command in the log? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the quick reply. What I meant was: In a test run you can pause the test with cy.pause()
This option is not there when you rerun the test while working inside the Studio, |
Beta Was this translation helpful? Give feedback.
-
|
Got it - I'll definitely look into adding this for the next release or perhaps a bit later. We're planning on adding the ability for you to do a "test run" of your test before saving it and I think this would be super useful there as well. |
Beta Was this translation helpful? Give feedback.
-
|
I like the basic implementation! Limited commands so can't do much but the basics are there. I was able to add commands but trying to save just gave me a vague "Cypress was unable to save these commands to your spec file." But looking forward to seeing how this feature grows! |
Beta Was this translation helpful? Give feedback.
-
|
Trying the Studio beta feature on my Mac running the latest OSX. I'm also getting this error no matter what I try -- Are there any configurations I can change or accessibility settings I need to change in order for this to work? |
Beta Was this translation helpful? Give feedback.
-
|
So this error is most likely happening because sourcemaps aren't being generated properly and Studio is having a hard time finding the correct spot in your code to save the commands - there's a couple things that we can do to make this more resilient even without sourcemaps that we can work on for the next release. Are you using Typescript? We had a couple issues when testing this internally but thought they were mostly all resolved. Regardless of whether or not you're using ts, if you're able to share your tsconfig and webpack config that would really help us out in reproducing the issue. |
Beta Was this translation helpful? Give feedback.
-
|
Figured out what was causing my issue. The folder containing spec test files cannot have whitespace. After updating the name of the folder holding the test from This was the console message that lead me to believe the folder whitespace was causing the issue: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks - that's super helpful for reproducing. I've filed an issue here #14659. |
Beta Was this translation helpful? Give feedback.
-
|
Hey, thanks so much for create Cypress - writing tests with Cypress are a game changer. It would be cool to be able to hook into the code when the "best" selector is being determined. |
Beta Was this translation helpful? Give feedback.
-
|
@davincho Thanks for the feedback! You can currently customize the way that selectors are generated by configuring the Selector Playground (this will be documented under Cypress Studio soon, too.). You can actually specify a custom function for generating a selector if needed, but unfortunately it will still have to work with In the future it's possible that we may add a plugin system that makes it easier to "hook in" to different actions within Studio (and someone could add support for the 3rd party commands you mentioned). However, this is still an early experimental release so any support for a plugin system is likely far away. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for linking the Selector Playground! We've been using data-cyid as a selector in our own app, I didn't realize we just had to change to data-cy to make the Cypress Studio super helpful! |
Beta Was this translation helpful? Give feedback.
-
|
It would be great if during the experimental phase (or permanently) could output the recorded steps in "raw" format to the log or to an expandable textarea in the left pane, either in csv format or line by line with the number being the test step delimiter which you already are logging in the left pane. Sample: --- OR --- |
Beta Was this translation helpful? Give feedback.
-
|
This would be very helpful until you have fixed the saving issue, because I'm currently using a framework that converts csv to cypress code, so I could already leverage the recording results if they were outputted in csv format |
Beta Was this translation helpful? Give feedback.
-
|
@hman61 Thanks for the feedback! Is there a chance that the saving issue you're having has to do with spaces or special characters in the file name (#14659, #14679)? If so, that's been fixed and should be getting released this Monday. If that's not the cause of your issues, could you please provide some additional information in order to help us reproduce the save issue that you're having? We've explored potentially outputting the code with a |
Beta Was this translation helpful? Give feedback.
-
|
My spec name had spaces in it (doh), I tried another one without spaces and it saved fine. Thanks for getting back to me so quickly. I still think the "Copy to Clip Board" would be very valuable because then you have the flexibility to modify it by adding some existing @Aliases and maybe paste the command steps to an existing function or a before each block instead of just using the command steps in the current test spec |
Beta Was this translation helpful? Give feedback.
-
|
@hman61 Happy to help! We definitely have copy to clipboard on our radar along with editing |
Beta Was this translation helpful? Give feedback.
-
|
We've just released copy to clipboard in v7.7.0 - check it out and let us know what you think! |
Beta Was this translation helpful? Give feedback.
-
|
It would be very helpful if there was a method to capture requests and turn them into fixtures. |
Beta Was this translation helpful? Give feedback.
-
|
@panzarino I want to know how to implement it? |
Beta Was this translation helpful? Give feedback.
-
|
I'm looking for an elegant way to be-able to read csv files that describes "dynamic tests" from fixtures prior to tests are being loaded. I know I can do it by adding a csv loader to the webpack config, or I can describe what need in json format and just use require('my.json') but the foot print is so much smaller when you describe the test in csv vs. json and much much faster to author in csv format. |
Beta Was this translation helpful? Give feedback.
-
|
When attempting to provide feedback via the 'Give Feedback' button in the Testrunner, Cypress shuts down if you're running the test in the Electron browser. TypeError: Cannot read property 'show' of undefined 'Give Feedback' works fine when running tests in Chrome or Edge. Maybe worth to note I upgraded to Cypress 6.4.0 before using Cypress Studio. Don't know if Cypress Studio is not intended to be used with Electron. If so perhaps you could add the use of Chrome or Edge to the prerequisites of the Realworld-App |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the feedback - our intention is definitely to support electron and we'll try to fix this bug asap Would you be able to file an issue? |
Beta Was this translation helpful? Give feedback.
-
|
This is an issue in 6.4.0 only and will be fixed in our next release. #14912 |
Beta Was this translation helpful? Give feedback.
-
|
Here are one suspect issue i saw: |
Beta Was this translation helpful? Give feedback.
-
|
@Light07 Thanks for the report! I'm not sure whether that error would be caused on our end or by the plugin implementation, but I can investigate. There is a decent chance that this might have to be fixed by the plugin author. |
Beta Was this translation helpful? Give feedback.
-
|
I really like this feature. My main feedback is that I would like to see more commands implemented, specifically I think keyboard presses should be recorded so we can do testing of keyboard accessibility. I would like to assume more commands are planned, but I don't see issues in the backlog. Somewhat related to keyboard testing, it would also be helpful if the testing "frame" was focused when you click the record button. This way, the tab order will start at the right place. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the feedback! So keyboard presses is something that could definitely be implemented fairly easily, my only concern is that it might create a lot of unwanted commands accidentally for users that are not trying to test accessibility/keyboard shortcuts. We could definitely implement something with a toggle switch which would enable the best of both worlds. Unfortunately, tabbing is not supported in Cypress so I'm not sure that there would be any benefit to focusing the frame at the start. |
Beta Was this translation helpful? Give feedback.
-
|
Hello! This tandem makes Storybook-like solutions almost useless for me. Each test can be considered as an example and it’s definitely better than support “stories” in separated files. Hope that https://github.com/evanw/esbuild or similar projects will be more mature and popular and compile time won’t be a problem soon. P.S. There is a visual bug in [email protected]. Studio’s magic wand icon becomes invisible in case you have long description string in ‘it()’ statement. Sorry, can’t attach the screenshot now as I write it from phone. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the feedback! We're currently making a whole host of changes for component testing that will be going live soon which makes the experience significantly better both on the UI side and compiling/bundling. |
Beta Was this translation helpful? Give feedback.
-
|
Issue for the visual bug - #15182 |
Beta Was this translation helpful? Give feedback.
-
|
Hello |
Beta Was this translation helpful? Give feedback.
-
|
I'll look into it. In the meantime, could you post your |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the feedback. Here is my {
"fileServerFolder": ".",
"fixturesFolder": "./src/fixtures",
"integrationFolder": "./src/integration",
"modifyObstructiveCode": false,
"pluginsFile": "./src/plugins/index",
"supportFile": "./src/support/index.ts",
"videosFolder": "../../dist/cypress/apps/extranet-e2e/videos",
"screenshotsFolder": "../../dist/cypress/apps/extranet-e2e/screenshots",
"chromeWebSecurity": false,
"viewportHeight": 800,
"viewportWidth": 1280,
"reporter": "../../node_modules/cypress-multi-reporters",
"reporterOptions": {
"reporterEnabled": "mochawesome, mocha-junit-reporter",
"mochaJunitReporterReporterOptions": {
"mochaFile": "../../dist/cypress/apps/extranet-e2e/reports/junit/results-[hash].xml"
},
"mochawesomeReporterOptions": {
"reportDir": "../../dist/cypress/apps/extranet-e2e/reports",
"overwrite": false,
"html": false
}
},
"downloadsFolder": "../../dist/cypress/apps/extranet-e2e/downloads",
"experimentalStudio" : true
} |
Beta Was this translation helpful? Give feedback.
-
|
I can't seem to figure it out from that - what does your plugins file look like? Are you using a custom preprocessor? |
Beta Was this translation helpful? Give feedback.
-
|
I am using Cypress with angular app. My plugins file : |
Beta Was this translation helpful? Give feedback.
-
|
I would guess that the preprocessor is not correctly generating sourcemaps. I can look into it a bit but I'm not sure if there's much we can do on our end. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, first of all, thank you for the tool "Cypress Studio" which greatly facilitates the tests. I have one question about the automatisation of the Drag and Drop event in Cypress: Do you know if the future releases of Cypress Studio will be able to deal with the Drag & Drop event justly ?. Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
This is soooo cool. Add a checkbox, so that when the checkbox is checked it adds not to every assertion that it suggests in the assertions menu.
that way it doesn't have to guess what is being intended. |
Beta Was this translation helpful? Give feedback.
-
|
this can be a basis for other studio assertions or commands build-ups as well. |
Beta Was this translation helpful? Give feedback.
-
|
then add the |
Beta Was this translation helpful? Give feedback.
-
|
Hi everyone, Does anyone can manage the Drag & Drop with Cypress ?. I justly installed the plugin "drag-and-drop" but i can't automatise the D&D on my page. Moreover, don't hesitate to reply if you have code examples about automatisation of the D&D with Cypress ;). Thank you :). |
Beta Was this translation helpful? Give feedback.
-
|
Hello from Texas! I'm having trouble getting Cypress Studio to recognize the right click on page elements in the preview area but only on our company's site. On other pages, like the Kitchen Sink test site, it works fine. I worry that our app might be hijacking the right-click in some way. Is there a good diagnostic approach I can use to find out why Cypress Studio might not be "seeing" the right-click? Instead of the Thanks in advance for any help! |
Beta Was this translation helpful? Give feedback.
-
|
Hi everyone, I want to test a download PDF button with Cypress. During a dowload process, Cy register the file in cypress/downloads. My PDF file to test is registered but i can't parse it with my task command. I got this error message on the test runner "Invalid PDF structure". When i open manually my pdf file in cypess/downloads, i only have this text "This PDF file is encrypted and can't be opened. " on a single page. Does anyone knwo how to fix it ?. Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
I'd recommend preflight.com for this. |
Beta Was this translation helpful? Give feedback.
-
|
My application is running inside iframes and I'm using "cypress-iframe": "^1.0.1" to interact with elements inside the page. /* ==== Generated with Cypress Studio ==== */
/* ==== End Cypress Studio ==== */Normally when writing tests I'm using cy.enter("iframe-name", getbody => getBody().find("elementName")) to interact with elements describe("portal", () => {
before(() => cy.login());
it("Verify ", () => {
cy.enter("iframe-name".then((getBody) => {
getBody().find("table > tbody").its("length").should("be.greaterThan", 1);
});
});
}); |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for this - it would be great to get Studio working with
I suspect (1) is not too difficult, and (2) is more complex. |
Beta Was this translation helpful? Give feedback.
-
|
Would it be possible to always run Cypress Studio in "Add Commands to Test" mode (based on a setting available to the user)? As long as the test ran successfully, I would like to add stuff to it. I'm creating a lot of tests now, and I notice that I have to interrupt the running tests a lot by clicking the magic wand to switch to "edit mode". |
Beta Was this translation helpful? Give feedback.
-
|
Is there a way to have a |
Beta Was this translation helpful? Give feedback.
-
|
Have you tried adding |
Beta Was this translation helpful? Give feedback.
-
|
I have a fictitious Order page that has all the HTML5 controls on it: Here are controls that are not automated and filled correctly: |
Beta Was this translation helpful? Give feedback.
-
|
👀 Thanks for this, good point - we need more support for all the different |
Beta Was this translation helpful? Give feedback.
-
|
How can I configure Cypress Studiot to look for a file within a specific subdirectory? My test file runs from It looks like Cypress naively assumes the est file will always be executed from the root of the project, but my tests are executed from within a |
Beta Was this translation helpful? Give feedback.
-
|
Hi @SheaBelsky, sorry for the delayed response. Can you share your cypress config file? |
Beta Was this translation helpful? Give feedback.
-
|
@warrensplayer This is my import { defineConfig } from "cypress";
export default defineConfig({
defaultCommandTimeout: 10000,
env: {
// Env removed
},
projectId: "removed",
e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents(on, config) {
// eslint-disable-next-line @typescript-eslint/no-var-requires
return require("./plugins/index.ts")(on, config);
},
baseUrl: "http://localhost:3100",
specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}"
}
}); |
Beta Was this translation helpful? Give feedback.
-
|
@SheaBelsky Thanks for providing this. I have not been able to reproduce your error. Can you please file an issue by selecting the "Get Started" button for a "Bug Report" here: https://github.com/cypress-io/cypress/issues/new/choose Please fill out all the sections as best as possible and include your config file above. Also, if you are able to create a simple project that reproduces the problem, please share that as well. Thanks again! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for this helpful tool! Just wondering if there is a way to auto-generate intercepted routes via Cypress Studio? Meaning that when adding commands to the spec I could right click a link and an intercepted route is generated by the studio. ChatGPT is suggesting ("Right click on an element that you want to assert on or intercept a request from.") that there is such a feature but all that I can find is the normal right-click Assertion options. Or maybe I misunderstood something. |
Beta Was this translation helpful? Give feedback.
-
No such feature exists in Studio at this point. Can you explain more about how you would like this to work? Eg: I'm understanding you want to click a button and it launches an API request, and you'd like to intercept this. Do you want to return some mock data? Eg, you'd like to see a UI that lets you chose a fixture, or enter some test data, as part of the Studio flow? |
Beta Was this translation helpful? Give feedback.
-
|
When creating integration tests for our frontend I find it tedious and time consuming to create intercepted requests/responses. For instance clicking a button or navigating to a new page can in worst case create dozen backend calls to different service apis. After making changes in the ui you make new requests to same apis with modified request and response data. Ideally when clicking a button or navigating I could (right click) choose to create a named intercepted requests with fixtures for all api calls that take place after the event. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the reply - can I probe you for some more information?
Agreed, sounds tedious.
It sounds like you'll still need to go through the tedious process of making those intercepts, though -- If I'm understanding correctly, you aren't really looking to change the process and end result (the generated test) but just have a UI that makes it faster / better? If you have any ideas (even a drawing made in Paint, or something) feel free to share it here. I'm keeping an eye on all the feedback / feature requests here in the meantime, and figuring out how they would be implemented / how much work / value they will have relative to each other. |
Beta Was this translation helpful? Give feedback.
-
|
Would love to see this feature in cypress studio. I work on an application that has a lot of slow APIs. In some cases we need to wait for APIs to complete and succeed before proceeding. |
Beta Was this translation helpful? Give feedback.
-
|
Hey team, As an automation developer with two years of experience in Cypress, I recently explored the idea of involving non-technical testers in test automation using Cypress Studio. While I appreciate the tool's potential, I've identified a few drawbacks that I believe need consideration and improvement: Inconsistent Element Selection:Cypress Studio uses a structure from the outermost HTML element to the innermost for element selection. This approach can result in inconsistency and might not be the most robust method for all scenarios. Dynamic Selectors and Coordinates:Cypress Studio occasionally utilizes dynamic selectors that change with each run and coordinates as selectors, creating inconsistency, especially when dependent on window size. A more stable approach to element selection could enhance the reliability of tests. Default Wait Time and API Waits:Cypress Studio lacks a default wait time, and automatic API waits are not included in the generated code. Running code without manually adding waits may lead to failures, particularly when there's no wait for the required page to load. Including better support for handling wait times in the generated code would significantly improve the tool's usability. I believe addressing these concerns would make Cypress Studio more user-friendly for non-technical testers. I appreciate your consideration of these suggestions and look forward to seeing how Cypress Studio evolves. These proposed changes aim to improve the user experience, reduce potential sources of test failure, and ultimately make Cypress Studio a more effective and user-friendly tool for non-technical testers. Your consideration of these enhancements is crucial in achieving a more streamlined and reliable automated testing process. |
Beta Was this translation helpful? Give feedback.
-
Of course and now that I am back to writing cypress tests again and generating non-trivial amount of intercepted api calls it is time to provide it. Playing around with browser dev-tools realized that it is possible to generate intercepts from the output of "Copy all as HAR". Would love to have a feature in Cypress that would allow me to generate code for the intercepted calls from this "HTTP Archive Format" log file. Work flow would involve:
Hope this clarifies the request (pun intended) bit more :) |
Beta Was this translation helpful? Give feedback.
-
|
Hi, Very nice new feature, I will test it the coming days. One suggestion : It would be fantastic if one could select an entry from an autocomplete. So .type('somevalue'), the list appears, and then select an option from the list, which is then added to the test script. Kind regards, Rob. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Team This is a great feature. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @fangqi5, quick product question: what are some of the specific things you are looking to do in terms of customization? |
Beta Was this translation helpful? Give feedback.
-
I'd like to enhance the assertion panel by implementing support for cypress-if syntax and adding custom functionality, which would streamline the assertion workflow for developers |
Beta Was this translation helpful? Give feedback.
and others
-
Hey everyone, thanks so much for testing out the early Beta of Cypress Studio!
We really appreciate any and all feedback that you have to provide. Please use this thread as a place to provide feedback, request features, or just comment on Cypress Studio in general.
If you have a larger issue to report (and it's not already listed here), please file a dedicated issue.
Some features that are in development:
Some features that we're considering releasing in the future:
Features that have been added since initial release:
We're super excited about releasing this feature and can't wait to see the tests that you create with it!
Studio Issue Tracker
Studio Documentation
Beta Was this translation helpful? Give feedback.
All reactions