Cypress Complete Beginners Masterclass 3 | Step by Step | Raghav Pal |

All FREE courses - automationstepbystep.com/
QUIZ - forms.gle/MJFQSFU6bkFP8Ter9
CLI
Package.json
File Handling
(Read, Write, Upload, Download)
In next parts:
Reporting
API Testing
Custom Commands
Cypress Studio
Cypress Dashboard
Cypress BDD Framework
Database Integration
Why CLI
easier, faster, efficient
less memory consuming
to integrate testing with external process
CI & CD
Step 1 - Open terminal and run command
npx cypress run
npx cypress run --help
--spec or -s
--browser or -b
--headless
Step 2 - Open package.json file
Step 3 - Add under scripts section
Every line under this section can be run with npm run command
"scripts": {
"test": "echo \" Hello World\"",
"log" : "echo Hello",
"cy-test" : "cypress run"
}
npm run cy-test
Step 4 - Can set configurations from command line
Syntax: cypress run --config configValues
cypress run --config pageLoadTimeout=100000,watchForFileChanges=false
Cypress Commands
cypress run Runs cypress tests from CLI
cypress open Opens Cypress App
cypress verify Verifies Cypress is installed correctly and is executable
cypress version Prints Cypress version
cypress info Prints information about Cypress and current Env
cypress cache Prints info about global Cypress cache
What is package.json
Every Node.js project has package.json file located in the root folder
Information about NodeJS project
List of dependencies with version
How to create :
npm init
npm init --y
devDependencies - used during dev or build phase
npm install - installs both dev and normal dependencies
npm install --dev - installs only dev dependencies
npm install --prod - will not include dev dependencies
~1.2.3 will match all 1.2.x versions but will miss 1.3.0
^1.2.3 will match any 1.x.x release including 1.3.0, but will hold off on 2.0.0
Package.json
records the minimum version needed (with ^ and ~)
is used for more than dependencies -like defining project info, description, author & license, scripts, etc
Package-lock.json
records the exact version of each installed package which allows you to re-install them
locks the dependencies with the installed version
Difference between tilde (~) and caret (^) in package.json
On npm install get the latest minor or patch version of the dependency mentioned in package.json
^ install the latest minor version - 1.x.x
tells npm that if someone clones the project and runs npm install then install the latest minor version of the package in his node_modules
~ install the latest patch version - 1.2.x
tells npm that if someone clones the project and runs npm install then install the latest patch version of the package in his node_modules
~1.2.3 will match all 1.2.x versions but will miss 1.3.0
^1.2.3 will match any 1.x.x release including 1.3.0, but will hold off on 2.0.0
How to Read and Write files in Cypress
Read files using fixture()
Read files using readFile()
Write files using writeFile()
Read files using fixture()
Step 1 - Create a new test spec file
Step 2 - Add a file under fixtures folder
Step 3 - Create a test and add command
Step 4 - To use data from file in all tests create a before function
Step 5 - Now use data from file in tests
Notes
If the file is in fixture folder it can be referenced directly by name without extension
For a JSON file its function can be used to access the values using keys
cy.fixture("filename").its('name').should('eq', 'hello')
Read files using readFile()
Step 1 - Create a new test in spec file
Step 2 - Test commands
Step 3 - Use cy.readFile() function
For JSON files can use its - .its('name').should('eq', ‘ data ‘)
Write files using writeFile()
Step 1 - Create a new test in spec file
Step 2 - Test commands
cy.writeFile('sample.txt', 'Hello l am learning Cypress
')
cy.writeFile('sample.txt', 'Hello I am Raghav', { flag: 'a+' })
Relative file paths can be used
cy.writeFile('./cypress/fixtures/files/sample.txt','Hell World’')
____________________________________________________________
Stories by Raghav - automationstepbystep.com/stor...
My Udemy Courses - automationstepbystep.com/udem...
Every LIKE & SUBSCRIPTION gives me great motivation to keep working for you
You can support my mission for education by sharing this knowledge and helping as many people as you can
If my work has helped you, consider helping any animal near you, in any way you can
Ask Raghav - bit.ly/2CoJGWf
Interviews - bit.ly/2NIPPxk
All Playlists - bit.ly/2LSiezA
---------- Connect with Raghav -----------
Udemy Courses - www.udemy.com/user/raghav-pal-3/
Twitter - / learnwithraghav
KZbin - / automationstepbystep
Never Stop Learning
Raghav

[@whitenoisefocus7962]

10/10 on quiz 2! Who's the king of SDET training on KZbin? 🔥

[@RaghavPal]

Great score

[@acreations8727]

23 of 25... This is wonderful. Thank you for being so clear.😀

[@RaghavPal]

Glad it was helpful

[@digitally_ascended_conscio6304]

Very good as always, cheers.

[@RaghavPal]

Thanks

[@ooozzzoo6885]

Really appreciate your lessons, it helps a lot and it is so simple for understanding! :)

[@RaghavPal]

You're very welcome!

[@3aadel]

Very good! many thanks

[@RaghavPal]

Thank you too!

[@DILSHANDESILVAmanOfTheYear]

Clear and very easy to understand. waiting for the next session...

[@RaghavPal]

4 Parts are published by now Dilshan

[@mehmetlalek3500]

Very goed and easy to understand. Thank you Raghav 😃👍

[@RaghavPal]

Most welcome

[@Aj21093]

Scored 25/25 This shows how amazing are your sessions. :)

[@RaghavPal]

Thanks, Great score Anukriti

[@user-re9ng7uj2x]

23/25 You've become my "go to" instructor!

[@RaghavPal]

So happy and humbled to know this Christy

[@usano2055]

I got 25/25 , Really appreciate your work , Thanks for info...

[@RaghavPal]

Great score. All the best for next

[@neerajguleria8877]

Thanks a lot Raghav for creating the masterclass on Cypress. Would you be including allure reports in the reporting in the upcoming masterclasses?

[@RaghavPal]

Hi Neeraj, not covered Allure reports with Cypress as of yet, In case I plan, will create a session

[@deepak6256]

Raghav, please share If you have covered

[@khaledashraf1092]

Really appreciated, what an amazing effort, i just wanted to ask what is the difference between cypress complete master class and cypress beginner tutorials?

[@RaghavPal]

Hi Khaled, In Masterclass are complete tutorials done in 3-4 parts, whereas the beginner series is one video dedicated to one topic, Also Masterclass sessions are created with recent version of cypress

[@whitenoisefocus7962]

24/25 on the above linked Quiz. Still 🔥!

[@RaghavPal]

Wow. amazing

[@MrH0bb0]

Hi Raghav, cannot thank you enough for all the tutorials you have been providing for free. Could you also create a video on ​the feature due to which Cypress logs out after every IT-Block execution is completed. How could we overcome this problem? Should we be having only one IT-Block for one login? Is that an appropriate way to manage all the test cases?

[@RaghavPal]

I will check on this

[@deepak6256]

Raghav. Please share your view and create a video so it can be helpful for everyone. Thanks in advance

[@user-jy4gz7on5q]

hi Raghav, u r doing very well in all ur videos. Pl keep it up. i just want to know do u have any video for API testing with Cypress? If yes, then plz let me know.

[@RaghavPal]

Not yet Newsukh, I will plan

[@poojamraosmg2183]

i scored 23/25,really helpful

[@RaghavPal]

Great Pooja

[@qamarstationwala7538]

hi Raghav thanks for the amazing videos. Quick question... i see you are using classic function declarations instead of arrow functions. personally I like arrow functions more as there is less to type but this changes the context of "this", so I wasn't able to use them for the readfile demo as it requires this to have the right context. do you know of any workarounds or do i have to stick to classic functions?

[@RaghavPal]

Hi Qamar, I will need to check on this, you can follow some examples online

[@jay6750]

When you use ()=>{} to define functions in JavaScript, it changes how this works. So when you use this inside an ()=>{} function, it doesn't refer to the same thing as when you use this inside a function(){} function. In your code, you used ()=>{} to define the before and it functions. This means that when you try to use this inside the it function to access the test_data fixture, it doesn't work because this is not referring to the correct context. If you want to use the arrow function syntax ()=>{} instead of function(){}, you can use the get method to retrieve the fixture data using @test_data alias inside the test case. before(() => { cy.fixture('example.json').as('test_data') }) it('read files using fixture', () => { cy.fixture('example.json').then((data) => { cy.log(data.name) cy.log(data.email) cy.log(data.body) }) cy.get('@test_data').then((testData) => { cy.log(testData.name) }) })

[@vidyeshthakare5586]

Thank you@@jay6750 . I was also stuck on same.

[@mariaelenacarraleropena9421]

@@jay6750 Thanks, if i had saw your comment before, i didnt had all day traying to understand whay -this- doesnt work inside ()=>{} function

[@saribshamim9876]

Great explanation ! My Quiz score: 24/25.

[@RaghavPal]

Excellent Sarib

[@abhijeet19403]

Got 23/25 Screenshots problems were not clear to me. Rest was easy. Thanks for making such amazing content.

[@RaghavPal]

Most welcome Abhijeet

[@miiftahl]

scored 23/25!

[@RaghavPal]

Great

[@user-bs1jm5ld2q]

Hello Raghav. I have question , How do I enabled the videos files when I run the testing with ( npx cypress run). Thank you in advance

[@RaghavPal]

Jerome *Here are the steps to enable video recording for your Cypress tests when running them with `npx cypress run`:* *1. Configure `cypress.config.js`:* - *Add or modify the `video` property:* ```javascript module.exports = { // ... other configurations video: true, // Enable video recording for all specs }; // Alternatively, for selective recording: module.exports = { // ... video: { specs: [ 'tests/e2e/my-spec-file.js', // Record only this spec // ... add more specs as needed ], }, }; ``` *2. Run Cypress from the Command Line:* - *Use `npx cypress run`:* ```bash npx cypress run ``` *3. Access Recorded Videos:* - *Find videos in the `cypress/videos` directory:* - Each spec file will have its own subdirectory. - Videos are named based on the spec name and timestamp. *Additional Customization Options:* - *Disable on Failure:* ```javascript module.exports = { // ... video: { onlyOnFailure: false, // Record videos even for successful tests }, }; ``` - *Adjust Video Resolution:* ```javascript module.exports = { // ... video: { resolution: { width: 1280, // Set desired width height: 720, // Set desired height }, }, }; ``` *Important Notes:* - *Headless Mode:* Videos are not recorded in headless mode by default. Use `--headed` or `--headed --no-sandbox` flags with `npx cypress run` to enable them. - *CI/CD:* Configure video recording settings appropriately in your CI/CD pipeline. - *Video Size:* Adjust resolution or recording settings for large test suites to manage video file sizes.

[@rihaskh]

Hi Sir could u plz include looping concepts in next master class ? nd returning values from functions in POM classes

[@RaghavPal]

Will try Rihas

[@mairaghaffar3845]

my score 24/25 :)

[@RaghavPal]

Great Maira.. keep it up

[@nirmalan17]

So cool to learn and got 24/25 🙌🙏 I have been following you for other contents but for this cypress one I really got my hands dirty as when there is a need 😀 and helping me. In addition if I need to implement cypress with TS can I refer to your other playlists where you have in the channel ?

[@RaghavPal]

Hi Nimmy, Great to know, I am yet to do Cypress with TS, you can find all links to tutorials here - automationstepbystep.com/

[@nirmalan17]

@@RaghavPal thanks for your kind response. Please let me know if you got any plans in near future to implement cypress with TS. 🤞

[@RaghavPal]

I have plans, but not sure by when will I be able to start on it

[@nirmalan17]

@@RaghavPal ok got it 👍 hope you start that 🔜 looking forward for that series 🤩thanks for supporting as always. ✌️

[@JenVollkron]

Thank you very much for your amazing videos Raghav! They are explained in a way that everyone can learn. I have a question related to following. My web app uses a third party oauth2.0 authentification service. When normally using, I open my webapp, it navigates me to the authentification website and after login there, I get navigated back to my app. How can I simulate a login with cypress properly and continue testing my webapp?

[@RaghavPal]

Hi, this can help docs.cypress.io/guides/end-to-end-testing/google-authentication

[@hafizsyedzainulabdin3900]

Quiz Marks: 23/25 Thanks Sir Love and respect from Pakistan

[@RaghavPal]

Great score Hafiz

[@samanthasajeevgomez8735]

Hi Raghav, your tutorials are useful. thank you for that. I have doubt regarding the command line running. for me its only few options are shown in command line when running 'cypress run [options]'. Just the options for version and help is shown. Can you help me with this?

[@RaghavPal]

Hi Samantha, hope you are using the right command on the right folder, Can check more in documentation

[@shilupg]

Hi Raghav, can we add the object locators I. example.json file and can we use it in the test script for identifying the object and actions

[@RaghavPal]

Yes, we can

[@GauravBhardwaj-ug3mo]

23/25 quiz, thanks

[@RaghavPal]

Well done

[@Testflaps]

@Raghav, as nobody else has responded...in English in the UK we pronounce cache like we say cash

[@RaghavPal]

thanks for letting me know Michael

[@user-fb1gv9pp5p]

The topics/contents mentioned in the start are not all in this playlist, or am I missing something here? I wanted to do the Cypress BDD and so on, where can I find these?

[@RaghavPal]

Yes, I had to add more lectures, will do as I get time

[@vocationaldoor5733]

25/25 thanks sir for clear explanation

[@RaghavPal]

Very good

[@vocationaldoor5733]

@@RaghavPal sir I am a 7 year experienced automation tester , need some guidance on career path

[@RaghavPal]

Sure, let me know the details and specifics

[@geethamaddirala]

Hi sir at 3.13 time stamp Api Testing on wards where did you covered pls mentioned the links . i watched all masterclass 4 videos i dnt find . thanks

[@RaghavPal]

Have to create lecture on that, I will plan

[@pranjaldesai7421]

HI Raghav, nice video. Have one question. How should i run below scenario with different 'it' block 1. Login 2. Create Quote 3. Create Sales Order 4. Generate Invoice

[@RaghavPal]

Hi Pranjal You can run the scenario with different it blocks by creating a separate it block for each step of the scenario. Here's an example: describe('My Scenario', () => { beforeEach(() => { cy.visit('example.com') }) it('should log in', () => { cy.get('#username').type('myusername') cy.get('#password').type('mypassword') cy.get('#login').click() cy.url().should('include', '/dashboard') }) it('should create a quote', () => { cy.get('#new-quote').click() cy.get('#quote-form').should('be.visible') cy.get('#quote-name').type('My Quote') cy.get('#quote-description').type('Description of my quote') cy.get('#save-quote').click() cy.url().should('include', '/quotes') }) it('should create a sales order', () => { cy.get('#new-sales-order').click() cy.get('#sales-order-form').should('be.visible') cy.get('#sales-order-name').type('My Sales Order') cy.get('#sales-order-description').type('Description of my sales order') cy.get('#save-sales-order').click() cy.url().should('include', '/sales-orders') }) it('should generate an invoice', () => { cy.get('#invoices').click() cy.get('#generate-invoice').click() cy.get('#invoice-form').should('be.visible') cy.get('#invoice-name').type('My Invoice') cy.get('#invoice-description').type('Description of my invoice') cy.get('#generate-invoice-button').click() cy.url().should('include', '/invoices') }) }) In this example, each it block represents a step of the scenario: logging in, creating a quote, creating a sales order, and generating an invoice. The beforeEach block is used to navigate to the starting page before each it block. You can add additional assertions or interactions within each it block as needed.

[@pranjaldesai7421]

@@RaghavPal thank you so much for reply. I don't want to do login every time. so don't want to use beforeEach

[@3aadel]

Hi Raghav, Many thanks ! Could you please show us how to deal with second Tab or child window with a dynamic url? (Can't switch to this tab or child window) in Cypress Thank you for the great job ❤😊

[@RaghavPal]

Hi Adel, I believe as of now Cypress does not support multiple tabs/windows

[@SanthoshkumarS-mo5ub]

Hello Raghav sir , your videos are very helpful thankyou for all the effort you are putting . Is there anyone we can read data from the excel sheet without converting it to Jason in cypress ? Thankyou in advance for Your reply.

[@RaghavPal]

will need to check some examples online for this

[@srgd4633]

Hello Sir. I have an interview coming up on Cypress. If possible, may you please provide series of questions?

[@RaghavPal]

I will plan on this, but can take some time, for now if you complete the 4 parts Masterclass of cypress, you can handle the interview

[@pradeeppatel-yo5ce]

21 of 25

[@RaghavPal]

Great Pradeep

[@KrishnaKumar-wy1mt]

Scored 23/25

[@RaghavPal]

well done

[@dougm118]

When I use %npx cypress run I do not get a screenshots or video folder automated created. I googled and had to set video:true, and screenshotOnRunFailure: true, in my cypress.config.js file as well as %npm install screenshot (although I am not sure if this is needed).

[@RaghavPal]

Let's address the issue with Cypress not automatically creating the screenshots and video folders during test runs. 1. Screenshots: - By default, Cypress captures screenshots automatically when a test fails during `cypress run`. However, screenshots are not automatically taken during `cypress open`. - To enable automatic screenshots on failure, ensure that you have set `screenshotOnRunFailure` to `true` in your `cypress.config.js` file: ```javascript // cypress.config.js module.exports = { // Other configuration options... screenshotOnRunFailure: true, }; ``` - Screenshots are stored in the `screenshotsFolder`, which is set to `cypress/screenshots` by default. If you want to change the folder location, you can specify a different path. 2. Videos: - Video recording is disabled by default but can be enabled by setting `video` to `true` in your configuration: ```javascript // cypress.config.js module.exports = { // Other configuration options... video: true, }; ``` - Videos are recorded for each spec file during `cypress run`. However, videos are not recorded during `cypress open`. - Videos are stored in the `videosFolder`, which is set to `cypress/videos` by default. 3. Additional Notes: - If you're using the `--record` flag while running tests (e.g., in a CI environment), videos are processed, compressed, and uploaded to Cypress Cloud after each spec file runs (whether successful or not). - If you don't want to clear your screenshots or videos folder before each run, you can set `trashAssetsBeforeRuns` to `false`. Remember to adjust your configuration settings as needed, and your screenshots and videos should be automatically generated during test runs

[@user-sx8fc4bq8b]

getting "'chcp' is not recognized as an internal or external command, operable program or batch file." error while running "npx cypress run" command on terminal.

[@RaghavPal]

Hi Sneha The error message "'chcp' is not recognized as an internal or external command, operable program or batch file." means that the `chcp` command is not available on your system. The `chcp` command is used to change the code page of the current console session. To fix this error, you need to install the `chcp` command on your system. You can do this by following these steps: 1. Open a command prompt. 2. Run the following command: ``` choco install chcp ``` 3. Once the `chcp` command is installed, you should be able to run the `npx cypress run` command without any errors. If you are still getting the error after installing the `chcp` command, you may need to add the `chcp` command to your system path. You can do this by following these steps: 1. Open the `System Environment Variables` dialog. 2. In the `System variables` section, double-click on the `Path` variable. 3. In the `Edit environment variable` dialog, add the following path to the end of the `Path` variable: ``` C:\Windows\System32 ``` 4. Click on the `OK` button. Once you have added the `chcp` command to your system path, you should be able to run the `npx cypress run` command without any errors. I hope this helps

[@khadijayamin1693]

Hi, I have a question how I can enter empty string in mandatory field as .type() requires an argument? Can you help me to handle this situation ? Thanks

[@RaghavPal]

just give an empty quote ' '

[@khadijayamin1693]

@@RaghavPal Thanks Sir for your reply. I tried and I get this error "cy.type() cannot accept an empty string. You need to actually type something."

[@RaghavPal]

Try cy.get(#id).type('{backspace}')

[@dth2881]

Could you please help to train about API, SQL, CI/CD with cypress?

[@RaghavPal]

Sure, Let's dive into each topic: 1. API (Application Programming Interface): - APIs allow different software applications to communicate with each other. They define a set of rules and protocols for interaction. - Types of APIs: - RESTful APIs: These are widely used for web services. They follow the principles of Representational State Transfer (REST) and use HTTP methods (GET, POST, PUT, DELETE) to perform actions on resources. - GraphQL APIs: These provide more flexibility by allowing clients to request only the data they need. - How to Learn: - Explore API documentation for popular services (e.g., Twitter, GitHub, Google Maps). Try making API requests using tools like Postman or cURL. - Learn about authentication (OAuth, API keys), request/response formats (JSON, XML), and status codes (200, 404, etc.). 2. SQL (Structured Query Language): - SQL is used to manage and manipulate relational databases. It allows you to create, retrieve, update, and delete data. - Basic SQL Commands: - `SELECT`: Retrieve data from a table. - `INSERT`: Add new records. - `UPDATE`: Modify existing records. - `DELETE`: Remove records. - Database Systems: - MySQL, PostgreSQL, SQLite, SQL Server, Oracle are popular SQL database systems. - How to Learn: - Set up a local database (e.g., MySQL) and practice writing SQL queries. - Take online courses or read tutorials on SQL fundamentals. 3. CI/CD (Continuous Integration/Continuous Deployment): - CI/CD automates the process of building, testing, and deploying code changes. - Continuous Integration (CI): - Developers merge their code into a shared repository frequently. - Automated tests run on every code commit to catch issues early. - Continuous Deployment (CD): - After passing CI, code is automatically deployed to production. - CD pipelines ensure consistent and reliable deployments. - Tools: - GitLab, Jenkins, Travis CI, CircleCI, GitHub Actions. - How to Learn: - Set up a simple CI/CD pipeline for a sample project. - Understand YAML configuration files for defining CI/CD workflows. 4. Cypress: - Cypress is an end-to-end testing framework for web applications. - Features: - Automatic reload of tests during development. - Time-travel debugging. - Interactive debugging. - Running in CI: - Cypress can be integrated into your CI/CD pipeline. - Run Cypress tests automatically after code changes. - View test results within your CI provider's UI. - How to Learn: - Explore the official Cypress documentation. - Practice writing Cypress tests for web applications. Remember, hands-on practice is essential for mastering these topics

[@pavithramugundhan2731]

Hi raghav , thanks lot for masterclass , could please help me , how to attach screenshots to cucumber html report for passed as well as for failed scenarios in cypress version 10

[@RaghavPal]

Hi Pavithra, can check this library - www.npmjs.com/package/cypress-cucumber-attach-screenshots-to-failed-steps

[@pavithramugundhan2731]

@@RaghavPal it’s done before cypress 10 ,but it’s not working now

[@RaghavPal]

if you want to use BDD Cucumber with Cypress for now you have to use Cypress before ver 10, can use this command: npm install cypress@9.7.0

[@cola1917]

55:55 you use the before and as function. it seems borken. I have already check my code. now, I use the get with @ to reference the file_data, it works.

[@RaghavPal]

Thanks for adding here

[@shankardas4886]

24/25 score but I didn't find the screenshot related information on these video

[@RaghavPal]

Great score Shankar, let me know what exactly you need. It may be present in next videos or I will send you a text answer for that

[@victorebong9960]

I have been searching for your tutorial on Cypress cucumber but I can't find it. Can you please do a video on this?

[@RaghavPal]

I will plan on this Victor

[@dougm118]

I have a test which exits non-gracefully in the GUI and it hangs the CLI when the test is run manually. Cypress is having trouble with an iFrame. Any recommendations beside CTRL-C at the command line or in the GUI to troubleshoot?

[@RaghavPal]

Doug I'll provide some recommendations to help you out: 1. JavaScript Redirects in the App: - One common issue with s is that the tested application might perform a JavaScript redirect via `window.top.location`. This can break out of the that Cypress placed it in. - Check if your app has any code that performs such redirects. You might need to disable this code during testing or ensure that it doesn't run when Cypress interacts with the 2. Cross-Domain Access: - Browsers adhere to a strict same-origin policy, which restricts access between s when their origin policies do not match. - To enable cross-domain access, consider setting the `chromeWebSecurity` property to `false` in your `cypress.config.js` file and then re-run your tests 3. React Iframe Compatibility in Headless Mode: - If you're running Cypress in headless mode, be aware that React s are not fully supported in the Electron browser. - Try setting the browser to Chrome explicitly using the `--browser chrome` command in your `package.json` file Remember to investigate the specific behavior of your , inspect the application code, and consider these recommendations.

[@dougm118]

@@RaghavPal Unfortunately I do not have access to source code for option #1, I am a QA engineer, not a developer, and unless there is a dynamic way to disable that in the browser (React front end); I tried option 2 and 3 but same results. The GUI seem to die and sends me back to the Cypress window showing my tests with no status and the CLI hangs. When I watch the UI preview, it seems to click the link but then it crashes. The operation should exit out of the iFrame and put the user back at the sign in page. I got this solution from the internet ```const getIframeDocument = () => { return cy .get('[name="mainContent"]') // Cypress yields jQuery element, which has the real // DOM element under property "0". // From the real DOM element we can get // the "document" element, it is stored in "contentDocument" property // Cypress "its" command can access deep properties using dot notation // on.cypress.io/its .its('0.contentDocument').should('exist') } const getIframeBody = () => { // get the document return getIframeDocument() // automatically retries until body is loaded .its('body').should('not.be.undefined') // wraps "body" DOM element to allow // chaining more Cypress commands, like ".find(...)" .then(cy.wrap) } describe('my tests', () => { ... it('successful login', () => { ... // limited success ; Cypress seems to crash here getIframeBody().find("a[href='/account/login']").click()

[@dougm118]

cache /kaSH/

[@RaghavPal]

okay, if it's working for you.. can go with it

[@gowreeswaribongu2257]

24/25

[@RaghavPal]

Great score

[@emmanuelpenarodriguez9821]

Hi, Raghav. I cannot run multiple commands in one single line if I include the config command either. Any idea?

[@RaghavPal]

Hi Emmanuel, what part of the video is this related to, will need more details

[@emmanuelpenarodriguez9821]

@@RaghavPal Hi, this is at minute 23:30 in the step 4.

[@RaghavPal]

Do you see any practical run in the video, can refer to cypress documentation

[@syedarbaz3781]

At 52:45 , I am not able to see data name and email in console , after using fixture ...though its running fine

[@RaghavPal]

Hi Syed, first you will have to click (pin) the step in the command log (left side) and then goto console

[@satyanarayanas6769]

22 out of 25

[@RaghavPal]

Great, all the best for next

[@gokulrao8984]

While running CLI command npx cypress run -s.\cypress\E2E\pom.cy.js -b chrome, i am getting an error Can't run because no spec files were found. We searched for specs matching this glob pattern: I thought it was to do with the folder structure and i tried all possible options, it didnt work. Can i add screenshot of the folder structure

[@gokulrao8984]

Solution to above: I added a line to cypressconfig.js - specpattern: "cypress/E2E/*.cy.js" - please check the names of the folders as for me it worked when i changed e2e to E2E (as this was my folder name)

[@RaghavPal]

Thanks for adding Gokul

[@billykidd5313]

I got 23 out of 25. Things are getting abit complexed, Maybe relate how we might use these examples in a testing world. Thanks

[@RaghavPal]

Sure Billy, i will take a note of this

[@RahulItapure]

I want to know how to handle redirect urls in cypress

[@RaghavPal]

Hi Rahul, Handling redirect URLs in Cypress is quite straightforward. Here are a few steps to follow: Use the cy.request() command to make an HTTP request and follow redirects. The followRedirect option is set to true by default, which means that the request will automatically follow any redirect URLs. Use the cy.location() command to verify the URL after the redirect. This command can be used to get the URL of the current page and assert that it matches the expected URL. Here's an example test that demonstrates how to handle redirect URLs: describe('Redirect tests', () => { it('should follow redirect URL', () => { cy.request('GET', 'example.com/redirect') .then((response) => { // Verify that the response was successful expect(response.status).to.eq(200); // Verify that the redirect URL was followed cy.location('href').should('eq', 'example.com/destination'); }); }); }); In this example, we use the cy.request() command to make a GET request to a URL that redirects to another URL. We then use the then() function to verify that the response was successful and use the cy.location() command to verify that the redirect URL was followed and that the current URL matches the expected URL. Note that this is just a basic example and may need to be adapted for your specific use case.

[@KrishnaKumar-wy1mt]

Hello Rahul. Thank you very much for your brilliant tutorials. They are super useful. I am following step by step seeing your videos. But I am stuck here when I try to run the cypress tests from CLI. I get this following error. I searched in Google and I couldn't find a solution. 1) An uncaught error was detected outside of a test 0 passing (382ms) 1 failing 1) An uncaught error was detected outside of a test: ReferenceError: The following error originated from your test code, not from Cypress. > process is not defined When Cypress detects uncaught errors originating from your test code it will automatically fail the current test. Cypress could not associate this error to any specific test. We dynamically generated a new test to display this failure. Can you please help? I tried to run a test from Cypress and seeing this error ReferenceError The following error originated from your test code, not from Cypress. > process is not defined When Cypress detects uncaught errors originating from your test code it will automatically fail the current test. Cypress could not associate this error to any specific test. We dynamically generated a new test to display this failure. node_modules/ci-info/index.js:5:1 3 | const vendors = require('./vendors.json') 4 | > 5 | const env = process.env | ^ 6 | 7 | // Used for testing only 8 | Object.defineProperty(exports, '_vendors', { Everything was working perfectly fine yesterday. I started to see the error when run the tests from CLI.

[@RaghavPal]

is this added automatically const env = process.env if yes, try to remove and check If you see any statement added by itself can remove and check

[@KrishnaKumar-wy1mt]

@@RaghavPal Thank you for your quick reply, Rahul. I tried that too, but gave me different errors. Then I commented "import cypress from 'cypress'" under e2e.js then it started to work now. I don't how it got added.

[@RaghavPal]

ok, sometimes when you use some field or function it tries to import from the relevant library or you may have selected unknowingly, thats ok

[@user-hg1vw4wn1i]

Thank you so much for your help this is really helpful. I have a basic question how can cy.get(".bg-\[\#0072cf\] >") be represented in my code knowing cypress cannot identify '\'

[@RaghavPal]

Abdul Since Cypress cannot directly handle the backslash character (`\`) within CSS selectors, you can use escape sequences to represent it within your code. The escape sequence for the backslash is `\\`. Here's the modified selector that correctly escapes the backslash: ```javascript cy.get(".bg\\[\\#0072cf\] >") ``` By using the escape sequence, you inform Cypress to interpret the backslash as an actual part of the selector and not as a special character. This ensures that Cypress correctly identifies the element with the specified class attribute.

[@user-hg1vw4wn1i]

Thank you so much. This works fine@@RaghavPal

[@ChrisPTY507]

How many parts will this master class have?

[@RaghavPal]

As of now I have created 4 parts and all of them are published

[@ChrisPTY507]

@@RaghavPal ok thanks!

[@pranjaldesai7421]

How to check element is exist or not on DOM ?

[@RaghavPal]

Hi Pranjal In Cypress, you can use the get command followed by the should command to check if an element exists on the DOM. Cypress automatically retries the assertion until it passes or times out. Here's an example in Cypress: // Check if element exists cy.get('.my-element').should('exist'); // Check if element does not exist cy.get('.my-element').should('not.exist'); In the above example, get('.my-element') is used to select the element based on a CSS selector. Then, you can use the should command with the assertion 'exist' to check if the element exists on the DOM. Conversely, you can use 'not.exist' to check if the element does not exist. Cypress's built-in assertions and fluent chaining make it easy to write expressive and readable tests for element existence.

[@pranjaldesai7421]

@@RaghavPal Thanks for your reply. I tried below cy.get(':nth-child(3) > .row > .col-md-3 > ls-select.ng-star-inserted > .ls-select > .mat-form-field > .mat-form-field-wrapper > .mat-form-field-flex > .mat-form-field-infix').then(($e2) =>{ if($e2.length){ cy.get(':nth-child(3) > .row > .col-md-3 > ls-select.ng-star-inserted > .ls-select > .mat-form-field > .mat-form-field-wrapper > .mat-form-field-flex > .mat-form-field-infix').click() }else { cy.log('not available'); } }) but it is not working. Can you please give example ?

[@RaghavPal]

Pranjal In Cypress, you can use the `.should()` command to check if an element exists in the DOM. Here's an example: //javascript cy.get('.my-element').should('exist').then(($element) => { // Element exists, perform actions here cy.log('Element exists'); }); In the above example, replace `.my-element` with the selector of the element you want to check for existence. The `.should('exist')` assertion ensures that the element exists in the DOM. If the element exists, the test will continue and you can perform further actions or assertions inside the `.then()` block. In the example, the log message "Element exists" is printed. If the element does not exist, the test will fail and display an error message

[@hazimabdoh6303]

the same like we pronounces cash

[@RaghavPal]

ok

[@rajasekhar9371]

22 marks I got out of 25

[@RaghavPal]

well done

[@rajasekhar9371]

Hi Raghav, first of all thanks for creating masterclass on cypress. I need to get some values like transaction ID from splunk...it is a kind of paragraph in splunk...from that string I need to separate transaction id...plz help me to get that value from splunk....

[@RaghavPal]

Hi Raja, I have not tried that, will need to take online help

[@abcefg7045]

20/ 25 with 3 silly mistakes😅

[@RaghavPal]

Great, try for next

[@abcefg7045]

@@RaghavPal hii please make a video for integrating Cypress with report portal

[@RaghavPal]

I will plan

[@oluwolebadmus6374]

Hi Raghav, great lecture. While running the RW_demo[dot]cy[dot]js: ```it('read files using fixture', function(){ cy.fixture('example.json').then(('data') => { cy.log(data.email) }) ``` Error: "Binding invalid left-hand side in function parameter list." I keep getting that compilation error that originates from the ".then(('data') =>" part. I read somewhere that it could be due to outdated TSC. We haven't even discussed in this video. Can you pls help?

[@oluwolebadmus6374]

i figured it ....I erroneously put data inside inverted comas i.e. 'data'.

[@RaghavPal]

Great. all the best for next Martins

[@vighneshmane2080]

at 55:55 with this : before(() => { cy.fixture("example").as("test_data"); }); it("Read files using Fixture", () => { cy.fixture("example").then((data) => { cy.log(data.name); cy.log(data.email); }); cy.log(this.test_data.name); }); I have got this error: Cannot read properties of undefined (reading 'test_data') cypress/e2e/readwritefiles.cy.js:10:15 8 | cy.log(data.email); 9 | }); > 10 | cy.log(this.test_data.name); | ^ 11 | }); 12 | Can someone help if there is anything wrong here?

[@RaghavPal]

Vighnesh The error "Cannot read properties of undefined (reading 'test_data')" is happening because you're trying to access `this.test_data` before it's fully available within the test case. Here's a breakdown of the issue and the solution: 1. Asynchronous Nature of Fixture Loading: - Cypress loads fixtures asynchronously, meaning it takes some time to fetch and process the data. - The `this.test_data` property won't be populated instantly when the test starts. 2. `cy.fixture("example").then(...)` vs. Direct Access: - Using `cy.fixture("example").then(...)` ensures you access the fixture data only after it's loaded successfully. - Trying to access `this.test_data` directly outside of a `.then()` block might lead to the error because the data might not be ready yet. Solution: 1. Access Fixture Data Within `.then()`: - Move the code that uses `this.test_data` inside the `.then()` block after loading the fixture: ```javascript before(() => { cy.fixture("example").as("test_data"); }); it("Read files using Fixture", () => { cy.fixture("example").then((data) => { cy.log(data.name); cy.log(data.email); // Access test_data here after it's loaded: cy.log(this.test_data.name); }); }); ``` 2. Remove Redundant Fixture Loading: - Since you've already loaded the fixture in the `before` hook, there's no need to load it again inside the test. Corrected Code: ```javascript before(() => { cy.fixture("example").as("test_data"); }); it("Read files using Fixture", () => { cy.then(() => { const data = this.test_data; cy.log(data.name); cy.log(data.email); }); }); ``` Remember: - Always access fixture data within `.then()` blocks or after ensuring it's loaded. - Avoid redundant fixture loading to improve test efficiency. ..

[@nicolasma7424]

Hi Raghav, at 55'53, you add the following line "cy.log(this.blabla.name);" But it's not working for me. I get the following error message: "Cannot read properties of undefined (reading 'test_data')". I'm looking into it but I can't find where the issue comes from. Do you have a repo from your code somewhere ?

[@RaghavPal]

Hi Nicolas, I believe there is some error or syntax issue, Pls check the code again, Also check the top of your code, in case any unnecessary libraries are imported

[@nicolasma7424]

@@RaghavPal I found where the issue comes from. This is my code: it('read files using fixtures', () => { cy.log(this.test_data.name); }) And this is yours: it('read files using fixtures', function () { cy.log(this.test_data.name); }) Can you please explain the difference between "function ()" and "() =>" ? I thought they were the exact same things... how come one is working and not the other ?

[@RaghavPal]

I will check on this and explain

[@tranhabaongoc]

@@nicolasma7424 confirm the above is true: I can run with 'function() ...' but not '() => {...}'. It's a mystery.

[@nicolasma7424]

@@tranhabaongoc Yeah that's weird. I can't explain it either and would be very curious to know what's going on under the hood here.

[@maaddhubabbu6767]

before(function() { cy.fixture("example.json").as('test_data') }) it("should be able to read and write files", () => { cy.fixture("example.json").then((data) => { cy.log(data.name); cy.log(data.email) }) cy.log(this.test_data.name); }) Facing error while trying to access cy.log(this.test_data.name); tried to find solution but could not. Is there anything wrong with code.

[@RaghavPal]

The error you are getting is because you are trying to access the `test_data` object before it has been initialized. The `before()` hook is executed before all of the tests in a suite, so the `test_data` object is not yet initialized when your `it()` test is executed. To fix this error, you need to move the `cy.fixture("example.json").as('test_data')` line into the `it()` test. This will ensure that the `test_data` object is initialized before you try to access it. Here is a corrected version of your code: ```javascript it("should be able to read and write files", () => { // Fixture the test data cy.fixture("example.json").as("test_data"); // Log the name and email from the test data cy.log(this.test_data.name); cy.log(this.test_data.email); }); ``` Now, when you run your test, you should see the name and email from the `example.json` file logged to the console. I hope this helps

[@maaddhubabbu6767]

Thank you for the quick response @@RaghavPal

[@digarkarki5628]

thanks for the video but i am getting an error while using cy.log(this.test_data.name) which we are using in 55:33 and the error i am getting is TEST BODY TypeError Cannot read properties of undefined (reading 'test_data') cypress/e2e/readwritefilesdemo.cy.js:9:21 7 | cy.log(data.name); 8 | cy.log(data.body); > 9 | cy.log(this.test_data.name) | ^ 10 | }) 11 | })

[@digarkarki5628]

got the issue i were using arrow function instead of function keyword now it is working but why can't we use arrow function instead of function keyword here?

[@RaghavPal]

Good. will cover this in JS tutorial. Can continue for now

[@mariuszpodgorski6695]

What are benefits of using methods in classes that contains only one step for example click()? Except of course code is clean but we are wasting time for making method. If I write it like this: cy.get(LoginPage.new_user_signup_text).should('have.text', 'New User Signup!'); I have all informations and I think it is self explained to. Time is money. I saw lot of tutorials that people are making one step methods but I never got the answer. In selenium, java it is even cleaner click(UserPanelPage.pencilIconButton); Can you answer me this question please.

[@RaghavPal]

Hi Mariusz, you can club multiple actions and can also create custom commands and add multiple steps in one command