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

[@RajendraKumbhar-y4e]

Just gave the Quiz. Achieved 25/25. Thanks Raghav for easy and efficient teaching. Easy to grasp your words and speed. Keep it up. Have been following you since the past 2 years now.

[@RaghavPal]

so great to know this Rajendra.. keep learning n sharing

[@DharmaTeja-o9p]

just gave the quiz 2 from masterclass 2 achieved 25/25. thanks Raghav for efficient and understandable teaching

[@RaghavPal]

That's awesome Dharma.. I'm glad the lessons are working for you

[@acreations8727]

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

[@RaghavPal]

Glad it was helpful

[@whitenoisefocus7962]

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

[@RaghavPal]

Great score

[@nehagoel6133]

Got 25/25, Thanks for the session. Really appreciate it.

[@RaghavPal]

Excellent Neha

[@usano2055]

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

[@RaghavPal]

Great score. All the best for next

[@jaganbabum3667]

Hi Raghav,Thanks for your wonderful videos. Cypress Quiz 2 Total points 22/25

[@RaghavPal]

Great score Jagan.. keep learning

[@sathyajammi1849]

Thanks for the very helpful video, I found it very useful.. just a note, "pretest" and "posttest" doesn't work when invoked with npm run test.. chatgpt recommended to use "npm run pretest && echo "Test" && npm run posttest".. This worked, FYI I'm on the latest version of Cypress v13.17, not sure if anything has changed from v10 the demo was created on.

[@RaghavPal]

Thanks for adding Sathya

[@ahsaanhassan482]

19 of 25. This is wonderfull.

[@RaghavPal]

great score Ahsaan

[@Aj21093]

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

[@RaghavPal]

Thanks, Great score Anukriti

[@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

[@digitally_ascended_conscio6304]

Very good as always, cheers.

[@RaghavPal]

Thanks

[@3aadel]

Very good! many thanks

[@RaghavPal]

Thank you too!

[@abhijeet19403]

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

[@RaghavPal]

Most welcome Abhijeet

[@ooozzzoo6885]

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

[@RaghavPal]

You're very welcome!

[@DILSHANDESILVAmanOfTheYear]

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

[@RaghavPal]

4 Parts are published by now Dilshan

[@ChristyCarpenterCrutchfield]

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

[@RaghavPal]

So happy and humbled to know this Christy

[@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

[@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

[@saribshamim9876]

Great explanation ! My Quiz score: 24/25.

[@RaghavPal]

Excellent Sarib

[@ScottDarrah]

Thank you for these great videos, and useful to use the orangehrmlive site to test against. Completed first two sections, about to start this one. Learning a lot - thanks again!

[@RaghavPal]

Fantastic,. keep learning

[@mehmetlalek3500]

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

[@RaghavPal]

Most welcome

[@newsukhkaur]

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

[@JeromeCulcul]

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.

[@hafizsyedzainulabdin3900]

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

[@RaghavPal]

Great score Hafiz

[@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

[@whitenoisefocus7962]

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

[@RaghavPal]

Wow. amazing

[@poojamraosmg2183]

i scored 23/25,really helpful

[@RaghavPal]

Great Pooja

[@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

[@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. ✌️

[@mairaghaffar3845]

my score 24/25 :)

[@RaghavPal]

Great Maira.. keep it up

[@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

[@xXMrThomasXx]

Quiz 10/10 nice :) Better than Quiz1 :) This is nice check my knowledge :) And I am back to the video but for now thx for your time and your hard work :)

[@RaghavPal]

Welcome back

[@sathyajammi1849]

Could you please share the masterclass links for the pending ones (API Testing, Git, Jenkins, CI/CD, and others not covered by the 4 masterclass sessions). Thanks in advance.

[@RaghavPal]

Sathya Can check all videos here - automationstepbystep.com/

[@miiftahl]

scored 23/25!

[@RaghavPal]

Great

[@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

[@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

[@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

[@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

[@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

[@GauravBhardwaj-ug3mo]

23/25 quiz, thanks

[@RaghavPal]

Well done

[@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

[@ZChattah]

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

[@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

[@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

[@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

[@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

[@ushaparasuraman9127]

@Raghav, I don't see the video folder for my project that created for this cypress class. I tried refreshing, the project but still don't see it. I see the screenshots folder though. Appreciate your help with this

[@RaghavPal]

Usha By default, Cypress records videos of your test runs and saves them in a videos folder within your project's root directory. However, it's possible that the folder might not be visible due to a few reasons. Here are some potential solutions to help you locate the video folder: 1. Check the cypress.json file Open your cypress.json file and look for the video configuration. Make sure that video is set to true and that the videoFolder is set to the correct path. For example: { "video": true, "videoFolder": "cypress/videos" } If the videoFolder is set to a different path, navigate to that location to find your video files. 2. Check the project root directory Ensure that you're looking in the correct location. The videos folder should be located in the root directory of your project, alongside the cypress folder. 3. Refresh the project directory Try refreshing the project directory in your code editor or IDE. Sometimes, the file system might not update immediately, and a refresh can help. 4. Run the tests again Rerun your Cypress tests to see if the video folder is created. If the tests are successful, the video folder should be generated. 5. Check for errors Verify that there are no errors in your test runs that might prevent the video folder from being created. Check the Cypress logs for any issues. -

[@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

[@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

[@akhilagarwal-xq4pz]

In last section of last video command was taken from imported code not from current file due to that both of my test1 and 2 are passing. for this what should i do

[@RaghavPal]

Akhil, pls give me more context or give timestamp from the video

[@akhilagarwal-xq4pz]

Cypress Complete Beginners Masterclass 2 | Step by Step where we creat test1 and test 2 and giving user name and password correct and incorrect but my both the test passing

[@RaghavPal]

just check the app in case its a demo app.. and then check your script again. you can print the values to check what values are getting entered

[@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

[@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

[@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

[@arunkamath7678]

Hi Raghav Sir, I hope this message finds you well. I have been following your videos to learn automation testing for my organization, and they have been immensely helpful. However, I am currently stuck on automating an Azure login process that involves three steps: entering an email address on the first page, typing a password on the second page, and completing Multi-Factor Authentication on the third page. Would you be able to provide guidance or assistance with this issue? Your expertise would be greatly appreciated.

[@RaghavPal]

Arun Automating the Azure login process with email, password, and Multi-Factor Authentication (MFA) can be challenging, but it's possible using Selenium or other automation tools. Here are some general concepts and approaches to help you achieve this: Use Selenium WebDriver: You can use Selenium WebDriver to automate the Azure login process. You'll need to choose a programming language (e.g., Python, Java, C#) and a WebDriver (e.g., ChromeDriver, GeckoDriver) to interact with the Azure login pages. Handle the email and password pages: Use Selenium to navigate to the Azure login page, enter the email address, and click the "Next" button. Then, enter the password and click the "Sign in" button. Handle the MFA page: After entering the password, you'll be redirected to the MFA page. You can use Selenium to interact with the MFA page, but you'll need to handle the MFA code generation and entry. One approach is to use an authenticator app like Google Authenticator or Microsoft Authenticator to generate the MFA code. Here's an example Python code using Selenium WebDriver to automate the Azure login process: python from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC # Set up the WebDriver driver = webdriver.Chrome() # Replace with your preferred WebDriver # Navigate to the Azure login page driver.get("login.microsoftonline.com/") # Enter the email address email_input = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "i0116")) ) email_input.send_keys("[e-mail]") # Click the "Next" button next_button = driver.find_element_by_id("idSIButton9") next_button.click() # Enter the password password_input = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "passwordInput")) ) password_input.send_keys("your_password") # Click the "Sign in" button sign_in_button = driver.find_element_by_id("submitButton") sign_in_button.click() # Handle the MFA page mfa_code_input = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "idTxtBx_SAOTCC_OTC")) ) # Generate the MFA code using an authenticator app mfa_code = generate_mfa_code() # Implement your MFA code generation logic here # Enter the MFA code mfa_code_input.send_keys(mfa_code) # Click the "Verify" button verify_button = driver.find_element_by_id("idSubmit_SAOTCC_Continue") verify_button.click() # Close the WebDriver driver.quit() Note that you'll need to implement the generate_mfa_code() function to generate the MFA code using an authenticator app. You can use libraries like otplib to generate the MFA code. Remember to handle errors and exceptions properly, and make sure to follow Azure's terms of service and security guidelines when automating the login process. Also, consider using a more secure approach like Azure's MSAL (Microsoft Authentication Library) to handle authentication and authorization. MSAL provides a more secure and efficient way to authenticate with Azure services -

[@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}')

[@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

[@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

[@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

[@KrishnaKumar-wy1mt]

Scored 23/25

[@RaghavPal]

well done

[@pradeeppatel-yo5ce]

21 of 25

[@RaghavPal]

Great Pradeep

[@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

[@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

[@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

[@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

[@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.

[@satyanarayanas6769]

22 out of 25

[@RaghavPal]

Great, all the best for next

[@AbdulgaffarSanni]

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.

[@AbdulgaffarSanni]

Thank you so much. This works fine@@RaghavPal

[@SarveshNellor]

for Me video recording not showing while running in cmd

[@RaghavPal]

will need more details.. steps, logs...

[@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!

[@gowreeswaribongu2257]

24/25

[@RaghavPal]

Great score

[@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

[@hazimabdoh6303]

the same like we pronounces cash

[@RaghavPal]

ok

[@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. ..

[@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

[@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.

[@Sarveshnellor-b1z]

it('readfile demo',()=>{ cy.fix auto suggestion not showing can please help

[@RaghavPal]

Sarvesh Let's break this down step by step: Step 1: Check if you have the correct Cypress version Make sure you're running the latest version of Cypress. You can check by running `npx cypress --version` in your terminal. If you're not on the latest version, update Cypress using `npm install cypress@latest` or `yarn add cypress@latest`. Step 2: Verify that you have the correct syntax The correct syntax for reading a file in Cypress is `cy.readFile()`, not `cy.fix`. `cy.fix` is not a valid Cypress command. `cy.readFile()` is used to read the contents of a file. Here's an example of how you can use `cy.readFile()`: ```javascript it('read file demo', () => { cy.readFile('path/to/your/file.txt').then((fileContent) => { // do something with the file content }) }) ``` Step 3: Check your IDE settings If you're using an Integrated Development Environment (IDE) like Visual Studio Code, IntelliJ, or Sublime Text, make sure that your IDE is configured to provide auto-suggestions for Cypress commands. For example, in Visual Studio Code, you can install the Cypress extension and then restart your IDE. This should enable auto-suggestions for Cypress commands. Step 4: Check for any typos or incorrect imports Double-check that you've imported Cypress correctly at the top of your test file: ```javascript import { cy } from 'cypress' ``` Also, verify that you haven't accidentally typed `cy.fix` instead of `cy.readFile()`. --

[@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

[@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