Cypress Complete Beginners Masterclass 2 | Step by Step | Raghav Pal |
ฝัง
- เผยแพร่เมื่อ 20 ต.ค. 2024
- All FREE courses - automationstep...
QUIZ - forms.gle/MJFQ...
Cypress with JavaScript
Cypress with TypeScript
Assertions
Page Object Model
App Actions
Grouping Tests
In Next Part
CLI
Package.json
File Handling
(Read, Write, Upload, Download)
Reporting
Cypress with JavaScript
Cypress with TypeScript
Cypress tests run with JavaScript, so you can use JavaScript or any language that transpiles down to javascript like TypeScript
Cypress with TypeScript
• Cypress Beginner Tutor...
TypeScript
• TypeScript for Beginners
Assertions in Cypress
Implicit Assertions - in-built assertions
Command in cypress like should() check for the expected condition without having to use any assert or expect command separately
Explicit Assertions - not in-built or referred
Have to use specific assertion commands like assert() or expect()
What is Page Object Model
a design principle
keep the objects & methods separate from test script
efficient reusability
easier, efficient and faster changes & maintenance
Step 1 : Create a login test
Step 2 : Create a file and add a class for the page
export class LoginPage{
}
Step 3 : Add objects and functions in the class
Step 4 : Import the class in the test spec
import {LoginPage} from "../pages/login_page"
Step 5 : Create object of the class
const loginPage = new LoginPage()
Step 6 : call the class functions
loginPage.enterUsername('test')
App Actions
What are App Actions
How is it different from Page Objects
Shortcuts in app
provide users with quick ways to navigate to specific activities in app
change the state of your app without user interactions (GUI)
How to Group tests in Cypress
Step 1 : In the test file add 2 it blocks for login test and run
Step 2 : Have a login test with valid and invalid credentials
Step 3 : Group all tests (it blocks) in a describe block
describe()
.only
.skip
beforeEach block
within describe - Runs before each test in that describe group
outside describe - Runs before each test in that spec file
____________________________________________________________
Stories by Raghav - automationstep...
My Udemy Courses - automationstep...
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/...
Twitter - / learnwithraghav
TH-cam - / automationstepbystep
Never Stop Learning
Raghav
Another great video - just the right speed. Honestly - this free video course is better than other ones I've paid for access to!
Most welcome Philip, humbled
Your videos are my go-to for practical test automation guidance! Thanks for making learning enjoyable and effective...
You're very welcome Nishi
Really great tutorial Raghav ! I'm used to be working with Selenium but now need to switch to Cypress. Your videos are awesome AND up-to-date, which is not the case of 90% of tutorials out there. Can't wait to see what's next :) Keep up the good work !
Hi Nicolas, thanks a lot
Raagav sir, you are a life saver......thank you very much.....please provide next class asap.....I was finding it very difficult with selenium, buy cypress literally saved me
Sure Akhil, have added 4 parts on Cypress, Can get from here - automationstepbystep.com/
@@RaghavPal Hi Raghav Sir by this 4 master lecture videos can we learn full cypress for end to end automation testing ? Please reply soon ?
It is a great course please keep teaching. My score was 22/25 not bad at all.
Great
Excellent effort! keep up the good work, Fantastic! tutorials, thank you so much, Raghav.
Most welcome Andrew
Very enjoyable course. Fast and well explained.
Great to hear Steven
Thank you @ragahav for very good tutorial with examples. This is very useful for the beginners.
Glad it was helpful Durga
I am from Pakistan Since the day reached to your channel, i decided to emphasis on Cypress of Automation., although it does not support Safari officially but by adding dependencies you can test on Safari with limitaitons we can test .... Thanks Raghav,
Most welcome Akhter
Great to learn and I have taken Quiz and scored 20marks. Thanks Raghav. Regards Anand Sarpatwari
All the best
Very nice class sir, it is very helpful....got more idea about cypress from your training..expect more trainings on different topics...great work..
Sure I will Soniya, keep watching
thank you very much for these lessons
You are welcome!
Thank you for these excellent tutorials Raghav
Most welcome Michael
Raghav- it is a such a wonderful training on cypress. Appreciate your effort
Thanks Sibi
Thanx for the excellent video .I have scored 19/25. Thanku Raghav
Well done
Thanks Raghav! This is exactly the type of tuitorial that I was looking for. Have been your subscriber from quite long & your videos never disappoint. Thankyou..!
Most welcome
Your lesson videos amazing thank you from Turkey
Most welcome Sevilay
Hi Raghav sir you video pretty easy to understand currently I m learning cypress with your video and I got 22/25 in quiz 2
Great Priyanshu
Hello Raghav! Thank you for this Cypress course, for the way you pass on knowledge, instructions, comments, suggestions. Happy to learn so easily and efficiently! My score on Quiz #2 was 20/25.
Great, all the best Marcus
Amazing job thanks Raghav
Thanks a ton Asiel
Hey Raghav, your pretty understandable and step by step explanations are easy to follow and very beneficial. Appreciate!
Thanks
Thank you for the great tutorials. Big up!!! 📢📢📢
My pleasure Ivan
Hi @Raghav, why I get the same result (pass) for the following assert.equal(4,4, 'Equal') and assert.equal(4,4, 'notEqual'). Can you please explain the purpose of notEqual.
Vidya
Let's dive into the behavior of `assert.equal` and `assert.notEqual` in Cypress.
1. `assert.equal(actual, expected, [message])`:
- This assertion checks if the `actual` value is equal to the `expected` value.
- If they are equal, the test passes; otherwise, it fails.
- The optional `message` parameter allows you to provide a custom message for better test reporting.
2. `assert.notEqual(actual, expected, [message])`:
- This assertion checks if the `actual` value is not equal to the `expected` value.
- If they are different, the test passes; if they are equal, the test fails.
- Again, you can include an optional `message` for clarity.
Now, let's consider your examples:
- `assert.equal(4, 4, 'Equal')`:
- Since 4 is indeed equal to 4, this assertion passes.
- The custom message "Equal" is associated with this assertion.
- `assert.equal(4, 4, 'notEqual')`:
- Surprisingly, this also passes!
- Why? Because the assertion checks for equality, and 4 is equal to 4.
- The custom message "notEqual" doesn't affect the outcome; it's just for reporting purposes.
In summary:
- Both assertions pass because the actual and expected values are the same (which is expected for `assert.equal`).
- If you want to verify that two values are different, use `assert.notEqual`.
Remember to choose the appropriate assertion based on your test requirements. If you specifically want to ensure inequality, use `assert.notEqual`.
--
Thanks, @Raghav. Really appreciate your explanation.
@@RaghavPal this is true and correct i tired it out and it is absolutely correct.....you can do some hands on to get more clarifications
Thank you so much for this course i find your course really interesting and i got 22 out of 25 in your quiz and hopefully i will do better in next quiz.
Great job Roshan. All the best
Excellent learning experience
Quiz marks 17/20
Thanks Sir
Great job
thank you very much for this lessons!
most welcome
Thank you for this free course, man. I appreciate you! score 20/25
most welcome Winston
Hi Raghav, these videos are great - even for a TOTAL beginner like me - one issue, I'm receiving the message "> _login_page.LoginPage is not a constructor" when running the test at the same point as you (37:59) and am unable to identify what the issue is - any ideas?
The error message you're encountering, "_LoginPage is not a constructor," typically occurs when there's an issue with how you're importing or using a class in your Cypress test. Let's troubleshoot this together.
First, let's take a look at your code snippet:
```javascript
///
import LoginPage from './PageObject/LoginPage'
it('valid test', function() {
const Login = new LoginPage()
// Rest of your test logic...
})
```
The error suggests that the `LoginPage` class is not being recognized as a constructor. Here are a couple of things to check:
1. Named Export:
- Ensure that you're exporting the `LoginPage` class using a named export in your `./PageObject/LoginPage` file. Instead of using `export default LoginPage`, try using a named export like this:
```javascript
export class LoginPage {
// Your class methods...
}
```
2. Import Statement:
- When importing the `LoginPage` class, use curly braces to import it as a named import:
```javascript
import { LoginPage } from './PageObject/LoginPage'
```
3. Function Declarations:
- Make sure that the functions within your `LoginPage` class are properly declared. You can either use the `function` keyword before each function name or declare them as arrow functions using `const`.
Example using `function` keyword:
```javascript
class LoginPage {
visit() {
cy.visit("ec2-35-179-99-242.eu-west-2.compute.amazonaws.com:2021/")
}
// Other methods...
}
```
Example using arrow functions:
```javascript
class LoginPage {
visit = () => {
cy.visit("ec2-35-179-99-242.eu-west-2.compute.amazonaws.com:2021/")
}
// Other methods...
}
```
Try making these adjustments and see if the issue persists
--
Thanks Raghav
Most welcome Prashant
Thank you Raghav! Please clarify what plugin for Cypress do you use in VSC ?
Most welcome
9/10 on the quiz! 🔥
Great . All the best for next
Can you please make a video on installing, running and general html/json report of lightouse using cypress
I will check and plan Madhu
@@RaghavPal Thanks for the quick response. While I'm executing the script. I'm receiving an error *" cy.task('lighthouse') failed with the following error, the task event has not been registered yet in setupnodes"*. Do you have any suggestions on this pleas
Madhu
here are a few suggestions for fixing the error "cy.task('lighthouse') failed with the following error, the task event has not been registered yet in setupnodes":
1. Make sure that you have installed the Cypress Lighthouse plugin. You can do this by running the following command in your terminal:
```
npm install cypress-lighthouse
```
2. Make sure that you have added the following code to your plugins/index.js file:
```
import { lighthouse } from 'cypress-lighthouse';
on('task', lighthouse);
```
3. Make sure that you are calling the cy.task() function after the on('task', lighthouse) function has been called.
If you are still getting the error after trying these suggestions, please check the Cypress documentation for more information.
Here are some additional things to check:
* Make sure that you are using the latest version of Cypress.
* Make sure that you are using the correct syntax for calling the cy.task() function.
* Make sure that there are no errors in your code.
If you are still having trouble, please post a question on the Cypress forum or open an issue on the Cypress GitHub repository
Thanks a tons!
Most welcome
Hello Raghav how i can connect with you i need your help for Karate framework
Hi Harkeerat, can let me know in the comment section of Karate videos
Thanks for such a great video, Can you please create a video on how to perform multilingual testing using Cypress
I will plan
@@RaghavPal Thank you 🙏
Nicely presented
Thanks Rajith
24/25, really nice tutorial! Thank you so much
Great score Tomáš, well done
Hello Raghav... Again a master class session.. QQ is there a way to execute tests in order in Cypress for version 8
Hi Ravi, I believe Cypress itself does not provide this feature and it is to encourage the design where tests are independent and do not have dependency, this will help during parallel runs. can check this - stackoverflow.com/questions/58936891/cypress-how-can-i-run-test-files-in-order
@@RaghavPal thank you so much Raghav, this will definitely help ❤️
Total points
22/25 thanks mr Raghav
All the best
Thanks!
Thanks for the support Philip
Hello thank you very much for your very nice course.
I have a question: "I'm trying to automate some tests on the company website, but I'm unable to do so because it uses reCAPTCHA. How can I solve this issue? Thank you very much."
Please check this - th-cam.com/video/QIYbr81dJGQ/w-d-xo.html
Great video. Is it normal for chai to have not been installed? expect() doesn't work unless I require("chai"), but apparently it was never installed so had to install separately
Hi Archie,
Cypress is an end-to-end testing framework, and Chai is an assertion library that can be used with Cypress to make test assertions
It's not uncommon for Chai to be installed separately from Cypress, as Chai is not included by default with Cypress. You'll need to install Chai manually if you want to use it in your Cypress tests
Thank You Raghav Ji ❤
Most welcome
Hi @Raghav, I have just started cypress with your tutorial. In between, one query. After website loaded, while trying to get the locator of an element, its not giving the actual locator. I tried with multiple websites, but same issue there. It would be helpful if you can advice here. Thanks for your tutorials
Manu
Here are some consolidated steps and strategies to troubleshoot and refine your locator selection:
Double-Check Element Uniqueness:
- Inspect and Analyze: Use your browser's developer tools to thoroughly inspect the element you're trying to interact with. Ensure it has unique attributes (like `id`, `class`, `data-*` attributes) or a distinctive combination of properties to differentiate it from other elements on the page.
- Contextual Identification: If there are multiple similar elements, consider using more specific locators that incorporate their relative position, text content, or other unique qualities. For example, `cy.get('div:nth-child(2) h3').contains('Specific Text')`.
Verify Selector Syntax and Typing:
- Case Sensitivity: Be mindful of case sensitivity when using CSS selectors. Match element attribute case exactly (e.g., `div.myClass`, not `Div.MyClass`).
- Escaping Special Characters: Properly escape special characters (e.g., backslashes in IDs) within locators using double backslashes (`\\`).
- Quotes and Delimiters: Ensure correct usage of single or double quotes for string values and commas/spaces to separate selectors when combining attributes.
Utilize Advanced Locators and Strategies:
- Alias and `data-*` Attributes: For dynamic content or testing components across pages, create unique `data-*` attributes on elements and use them in locators. Cypress has a handy `data-cy` alias for this purpose.
- Custom Commands: Create reusable custom commands for complex locators or interactions that you use frequently. This improves code readability and maintainability.
- cy.contains() for Text-Based Locators: Use `cy.contains()` for partial or full text matches when appropriate. Be cautious with potential ambiguity.
- cy.get(':visible') and Visibility: Ensure the element is visible on the screen before interacting with it. Use `cy.get(':visible')` or visibility checks before your actions.
Consider Using Waits and Timeouts:
- cy.wait()` for Asynchronous Operations: If the element appears dynamically after an AJAX call or other asynchronous action, use `cy.wait()` or asynchronous handling patterns (e.g., `.should('be.visible').then(...)`) to ensure its presence before attempting to interact.
- cy.wait(ms)` for Delays: If there's a known delay between elements appearing, use `cy.wait(ms)` to introduce a short waiting period.
Debugging and Troubleshooting:
- Cypress Debugger: Use the built-in Cypress debugger to step through your tests, inspect variables, and examine DOM state at specific points.
- DOM Inspection: Right-click the element in your browser (Inspect) and then click "Copy selector" to see the exact selector Cypress might be generating and compare it to what you're using.
Hii Ragav thankyou so much.... Can you please is there any courses available with certification for cypress?
Anagha
I don't think there is any official certfication course from Cypress yet.. There may be others.. can check online
First test 10/10
Second test 21/25(Some are wrong because I have listended half lecture till test)
Thank you sir. your lecutures are helping me alot. (Appreciation from Pakistan)
Most welcome. all the best for next quiz
Hi Raghav Sir,
Great tutorial sir w.r.t Cypress, Can you please help me out in configuring Duo Auth for login where we enter the UName and Password ==> redirects to an approve request for DUO Auth in our phone .
Kindly let m the how can I perform this, tried couple of snippets but not able to redirect to the success login
Hi Navya, I have not checked this, will need to find online
Good 2nd class on Cypress
I got 10 out of 10 🎉
Great... keep learning Billy
This is brilliant! Thank you, I got 17/20 on your quiz :)
Excellent Nicola
Hi Raghav , I scored 23/25 in this quiz session...I love this video
Great score Roli. All the best for next
20/25 almost all good
Well done Andrés
hi Raghav
instead of saving objects with in the same file , can i add in a separate file and import --> as there could be a chance we have so many locator values with in the web page , for example filling a form
and if so , can you please let know how ?
Yes, you can
Hello Raaghav sir!! For example if I insert some data and on click it will save to our UAT db. Do we actually save our data into the db or we can mock request to db.
Hi Shubh,
In Cypress, you can mock server responses to simulate the behavior of the application without actually making real requests to the database or server. This is done using Cypress' built-in cy.route() command.
When you use cy.route(), you can intercept requests made by your application and return mocked responses instead. This allows you to simulate different server responses and test how your application behaves in different scenarios.
@@RaghavPal Thank you so much sir for your response. What would I prefer mock response or actual db response for testing
mocking will be easy and quick
Thank you, Raghav. Great course.
For now, OrangeHRM element would not be the same as you make this video, so I need to do adjustment for the code when I learn Cypress with this video :D
Glad it was helpful!
Thank you Raghav! One thing just like to inform you that please upgrade your video quality please.. Video is not clear like others. Take care
Noted, Anik, I will improve this
@@RaghavPal Appreciated
Hi raghav ,thanks for ur master class it was very helpful u are down to the earth person can u please say how we can write a test case or how to automate from drop down lost,for example I need to select a county from list of countries drop down ,please help
Hi Vishnu, thanks, I will plan sessions on this
First quiz =10/10 , Second quiz = 10/10
Great Suraj
Hi Raghav, do you have any video on cloud performance testing with JMeter?
Hi Nitin, I have shown how to do performance testing with JMeter, you can use the same process for any similar apps, can find all videos here - automationstepbystep.com/
@39:36 how can we avoid hardcoding and instead user can directly input in cypress? Expecting you kind reply.
Hi Ashwin, you mean the values of username and password, Yes we can take it from another file (excel), class, variable etc
Can check some online examples
@@RaghavPal thank you 😊
The testing industry revolves around this beautiful person :)
Thanks for the kind words Cemal, humbled
Quiz comes after 23 minutes. All topics asked in quiz are not covered by that time. Is it true or I am missing something.
Yes Varun, there are several Quizzes, so this quiz contains questions done until this time
Hello Sir,
Can you please explain the git and Jenkins integration with Cypress?
It would be helpful.
Thanks
will plan
Thank you so much your awesome tutorial saved me!! Can we get access to the slides?
Thanks, slides not handy with me now
Great!
Thanks
@@RaghavPal sir can we have advanced level tutorial on Cypress?
I will plan
Hi Raghav, thanks again for video as always. Just one question, if I have one long test I would like to break up into smaller test blocks, just to have parts of the test show The result passing or not. Problem is when I split them into different "it" blocks, it doesn't include the result from the previous block. For example 1st "it" block : Navigate to URL, Second 'it" block I want to log into site with credentials. In second "it" block, I am no longer on the same URL as I navigated to in the first block, how can I manage this? Thanks so much
Hi Farhan,
Katalon Studio offers a TestOps platform that provides a central repository for storing and sharing your test execution results, including pass/fail rates, baseline, performance, and other metrics. TestOps also offers advanced reporting and analytics features that can help you visualize and analyze your test results, track your testing progress over time, and identify trends and issues.
Yes, Katalon Studio supports integration with secret servers, such as HashiCorp Vault, using custom keywords or plugins. This allows you to securely store and manage your passwords and other sensitive data, and retrieve them at runtime when needed.
Katalon Studio supports testing from both SQL and non-SQL data sources. You can use Katalon's built-in data-driven testing features to read data from CSV, Excel, or database sources, or write custom scripts to connect to other data sources using JDBC or other APIs. I will try to do a video
hi Raghav what is your code theme in VS studio?
Jerome
I do not remember exactly, you can try some dark themes and compare
Hello Sir, please make a video on cypress code coverage using both Javascript and Typescript.
I will plan
Hi Raghav,
I want to use same session across different spec, for that I am usinf testIsolation:false and also cacheAcrossSpecs: true, but still the session is not maintained, can you please let me know how to create session using cookies and maintain it across all the specs.
Thanks!
Aditi
To create a session using cookies and maintain it across all specs in Cypress, you can use the following steps:
**1. Create a cookie jar**
A cookie jar is a container that stores cookies. You can create a cookie jar using the following code:
```javascript
const cookieJar = new Cypress.CookieJar();
```
**2. Set the cookies**
You can set cookies in the cookie jar using the following code:
```javascript
cookieJar.setCookie('session_id', '1234567890');
```
**3. Start a new Cypress spec**
When you start a new Cypress spec, you can pass the cookie jar to the `cy.visit()` method. This will tell Cypress to use the cookie jar for the session.
```javascript
cy.visit('example.com', { cookieJar });
```
**4. Maintain the session across specs**
To maintain the session across specs, you can use the following code:
```javascript
// Get the cookie jar from the current spec.
const cookieJar = cy.getCookieJar();
// Set the cookies in the cookie jar for the next spec.
cookieJar.setCookie('session_id', '1234567890');
```
You can call this code at the beginning of each spec that needs to use the existing session.
Here is an example of a Cypress script that uses a cookie jar to maintain a session across specs:
```javascript
// Create a cookie jar.
const cookieJar = new Cypress.CookieJar();
// Set the session cookie.
cookieJar.setCookie('session_id', '1234567890');
// Start a new spec and pass the cookie jar to the visit method.
cy.visit('example.com', { cookieJar });
// Do some tests.
// Maintain the session for the next spec.
cookieJar.setCookie('session_id', '1234567890');
// Start a new spec.
cy.visit('example.com', { cookieJar });
// Do some more tests.
```
This script will maintain the session across both specs, so that the user will not have to log in again.
@@RaghavPal Thank you so much, will try it and let you know.
@Raghav create a modal that will display where we can donate to the videos we watched and that actually helped us.....just my own suggestions . voluntarily donation just like the way we see it on Eclipse and i had a serious problem setting up my Eclipse back again after i stopped using it for more than 7month...can you help out with the settings ? most especially the dependencies is giving me a lot of though time down to the maven project.
i would appreciate if you can help out with the settings. thank you DELIGENT & IMPACTFUL COACH RAGHAV
I am saying hello from Lagos Nigeria......I WILL NEVER STOP LEARNING
Thank You for the kind words.. all this education is free
Hi I have a query related to a functionality . I have 31 URLs programs at which I need to test a single chat icon test ( just open and close) I am having trouble how to do that. Can you please assist me
Hi Prikshit
Here are the steps on how to test a single chat icon test (just open and close) in Cypress:
1. Create a Cypress test file. The test file should be named chat-icon-test.spec.js.
2. Import the Cypress cy object. The cy object is used to interact with the browser.
3. Open the first URL in the list. You can do this by using the cy.visit() method.
4. Find the chat icon. You can find the chat icon by using the cy.get() method.
5. Click on the chat icon. You can click on the chat icon by using the cy.click() method.
6. Verify that the chat window is open. You can verify that the chat window is open by using the cy.get() method to find the chat window and then checking if it is visible.
7. Close the chat window. You can close the chat window by using the cy.close() method.
8. Repeat steps 4-7 for the remaining URLs in the list.
Here is an example of a Cypress test file that tests a single chat icon test (just open and close):
Code snippet
import { cy } from "cypress";
describe("Chat icon test", () => {
it("should open and close the chat window", () => {
cy.visit("www.example.com");
cy.get(".chat-icon").click();
cy.get(".chat-window").should("be.visible");
cy.close();
});
});
I hope this helps
Got 10 marks in second quiz. Thank you
Great
HI Bro, your videos are very nice, neatly explained in a simple fashion.. are there any videos on Cypress project for practice.. if not please do make some on orange HRM application.. TIA
Thanks Ravi, you can find all here - automationstepbystep.com/
Hello! Where have you covered integration with Git, Jenkins?
Harsh, its in part 3 th-cam.com/video/qjhfObj3yzQ/w-d-xo.htmlsi=xO1fTGorbdzzzUd7
@@RaghavPal I am afraid I still could not find any mention of integration with Git or Jenkins in your third masterclass video (link above). I had already watched it before raising the query here. There is file handling and running tests via CLI. But no integration. Can you mention the timestamps?
Okay I will check Harsh, for now can follow these steps:
## Integrating Cypress with Git
Prerequisites: Install Git on your system
1. Initialize a Git repository
- Navigate to your project directory in the terminal and run `git init`
2. Add all your files to the Git repository
- Run `git add .` to add all files in the current directory
3. Commit your changes
- Run `git commit -m "Initial commit"` to commit your changes
4. Push your changes to a remote repository
- If you haven't already, create a new repository on GitHub.
- Run `git remote add origin your-repository-url` to add your remote repository.
- Run `git push -u origin master` to push your changes to the remote repository
## Integrating Cypress with Jenkins
1. Install Node.js on Jenkins
- Open the Plugin Manager in Jenkins.
- Download and configure NodeJS
- Open the Global Tool Configuration and configure NodeJS to the latest version
2. Create a new Jenkins job
- Add a build step
- In the build step, use the following commands to install project dependencies and run Cypress tests:
```
npm install
npx cypress run
```
- These commands will install all necessary dependencies and run your Cypress tests
3. Configure Git in Jenkins
- In your Jenkins job configuration, specify your Git repository URL and define the branches you want to build
- Set up any build triggers (e.g., poll SCM, webhook)
4. Post-build Actions
- Configure post-build actions based on your requirements. You can archive test reports, generate HTML reports using the plugin, or trigger deployment steps depending on your project’s needs
Please note that these steps are a general guide and the exact process may vary depending on the specific versions of the software you are using.
23/25. Nice tutorial for Cypress 10.x !! Thank you so much.
most welcome
Hello sir Can you make one more video for "how to read the data from excel file in cypress"
I will try this Rishabh
Thank you@@RaghavPal
QUIZ 2 i scored 22/25
Great.. all the best for next
9/10 Quiz because Page object model also part of question am choose wrong
Great, all the best for Next
Hi Raghav
Can we hide 'chrome is being controlled by automated software' from browser in cypress
Hi Raman, can check this discussion - github.com/cypress-io/cypress/issues/5021
23/25 score :) thnks sir
Well done
Grazie.
Thanks a lot for the support
Hii Raghav,
i am getting an issue when we import username and pwd
//import { loginpages, loginpages } from "./pages/login_pages"
let loginpages = new loginpages()
it('pom', function(){
loginpages.//
after giving .(dot) in suggestion username and password field are not showing..
please suggest.
Hi Harshada,
Based on the code snippet you provided, it looks like you are trying to import a module called login_pages and create an instance of the loginpages class, but the username and password fields are not showing up in the suggestion dropdown.
There could be several reasons why this is happening. Here are a few things to check:
Make sure that the login_pages module exports the loginpages class and that the username and password fields are defined as properties or methods of this class.
Verify that the login_pages module is correctly imported into your test file using a relative file path. For example, if login_pages.js is located in a folder called pages in the same directory as your test file, you would import it like this:
import { loginpages } from "./pages/login_pages";
Check that your IDE or text editor is configured to provide suggestions for properties and methods of imported modules. This may involve installing additional plugins or configuring the autocomplete settings in your editor.
Make sure that the username and password fields are defined as public properties or methods of the loginpages class. If they are defined as private or protected properties or methods, they may not be visible outside of the class.
If none of these suggestions solve the issue, please provide more details about your specific code and setup so that I can provide more targeted assistance.
@@RaghavPal thank you
when I try to use the describe (), I just observed automatically the "import { beforeEach } from "mocha"" is created and not sure of the reason. If you could help me to understand it might be useful. Thanks
You can remove that and go with as shown in the tutorial
Thank you very much sir
Quiz: 22/25
Sir, when we can expect next session?
already uploaded Asif
@RaghavPal
while running my scripts in docker container, facing the issue
"Your page did not fire its load event within 60000."
no urls are blocked in network. Please help in resolving this
Hi Santhosh
The error "Your page did not fire its load event within 60000" occurs when Cypress times out waiting for the page to load. This can happen for a few reasons, such as:
* The page is taking a long time to load.
* There is a network issue that is preventing the page from loading.
* There is a bug in your Cypress tests that is preventing the page from loading.
To resolve the error, you need to identify the root cause of the problem. Here are some things you can try:
* Check the network logs to see if there are any errors.
* Use a tool like `curl` to see if you can load the page from the command line.
* Debug your Cypress tests to see if there is a bug that is preventing the page from loading.
If you are still unable to resolve the error, you can try increasing the `pageLoadTimeout` value in your Cypress configuration file. This will tell Cypress to wait longer for the page to load.
Here is an example of how to increase the `pageLoadTimeout` value in your Cypress configuration file:
```
{
"pageLoadTimeout": 120000
}
```
Once you have increased the `pageLoadTimeout` value, you should be able to run your Cypress tests without getting the error.
In addition to the above, you can also try the following:
* Make sure that you are using the latest version of Cypress.
* Try using a different browser, such as Firefox or Edge.
* Try using a different network connection.
I hope this helps
Hi Sir,
In login page if we are getting accept cookies popup and want to click on Accept all cookies button from the pop up then how to right code???
When dealing with a "Accept cookies" popup in Cypress, you can follow these steps to click the button:
1. Identify the Popup Element:
- First, inspect the page to find the specific element representing the "Accept all cookies" button.
- If the button is inside an , you'll need to handle it accordingly.
2. Handle Iframes (if applicable):
- If the button is inside an , you can use the `cypress-` plugin to interact with it.
- Install the plugin by running:
```
npm install cypress-
```
- In your test spec, add the following line at the top:
```javascript
require('cypress-');
```
- Then, locate the using its ID (replace `#my-frame` with the actual ID):
```javascript
cy.('#my-frame')
.find('button[title="Accept Cookies"]')
.click();
```
3. Click the Button:
- If the button is not inside an , you can directly click it using:
```javascript
cy.contains('Accept', { timeout: 20000 }).click({ force: true });
```
4. Additional Considerations:
- Sometimes popups take a moment to appear. You can add a `cy.wait(5000)` to account for any delay.
- Ensure that your test environment allows interaction with popups and doesn't block them.
Remember to adjust the selectors and timeouts based on your specific application.
..
@@RaghavPal Thank you Sir
The scripts written on VS code are not getting displayed under the specs Cypress dashboard. But i can see that under the respective folder .Can you please help me?
Hi Naini,
When running Cypress tests, the Cypress dashboard looks for tests that are located in the integration or E2E folder by default. If your test scripts are not located in this folder or its subfolders, they will not be picked up by the Cypress dashboard.
To fix this issue, you need to move your test scripts to the integration/e2e folder or one of its subfolders.
Once you have moved your test scripts to the correct location, the Cypress dashboard should be able to find them and display them in the test runner.
17/25
great
I tried using the orange HRM, I enter invalid details, it failed on the page but on the specs, it shows a 1passed with a green mark tick instead of it to display 1failed on the red cross sign. Please what could be the issue sir
You should check for ' ' on the login_page.js username and password. All username and password should have the same color
@@lestergt6 thank you. It's the same
Hi Sir, your videos are simple are easy to understand. Wondering if you could do a small video on cucumber with BDD using JavaScript would be useful.
Hi Sirisha, I will plan
In page object model, why is the file name login_page.js? Why not login_page.cy.js ? Why .cy missing?
Hi Wayez
You can use either `login_page.js` or `login_page.cy.js` as the file name for your Cypress test file. The `.cy` extension is not necessary, but it is a convention that is used by many Cypress users.
The `.cy` extension is a way to distinguish Cypress test files from other JavaScript files. It also helps to make it clear that the file contains Cypress code.
If you are new to Cypress, you may want to use the `.cy` extension to make it easier to identify your Cypress test files. However, there is no technical reason why you have to use the `.cy` extension.
Here is an example of a Cypress test file that does not use the `.cy` extension:
```
// login_page.js
const { visit } = require('cypress');
describe('Login Page', () => {
it('should display the login form', () => {
visit('/login');
expect(cy.get('#login-form')).to.be.visible;
});
});
```
This code will work exactly the same as if it were in a file called `login_page.cy.js`.
Ultimately, the decision of whether or not to use the `.cy` extension is up to you. There is no right or wrong answer.
thank
23/25
Great score. All the best for next
In this video : I want to know that why You dont add //// in starting ?
Hi Noor
I may have added that at global level (Config file)
When you have created the login_page, why you given extension as .js instead of cy.js
Where exactly, tell me the time stamp
@@RaghavPal 30:57
that is fine, you can go as per the test file extensions you mention in the config file, Can change from there
my score 24/25
Great Anup
the URL is being appended by "__/" in my office machine...can you please suggest a fix
Hi Vishal, will need to check with your IT team
Hey Raghav.. I gained 7 marks in quiz1 and in quiz2 gained 9 marks
Great, take a note of the missed ques and try again
@@RaghavPal sur thankyou, i didnot expect reply from you. I am happy that you replied.
Hi Raghav. Please do the videos on Angular latest version. It is the current trending also. Please do this one. It will be very helpful to every one.
I will plan Sai
what if login can be only throw google account ??
Hi Ayoub, you can use plugin cypress-social-login which does just that.
this can help
docs.cypress.io/guides/end-to-end-testing/google-authentication
stackoverflow.com/questions/53487224/anyone-has-an-example-in-cypress-that-uses-google-login
1st Quiz score 8/10 & 2nd Quiz score 23/25...
Great, all the best
Thats all good @Raghav, I realized the mistake of using ('true') instead of (true).
Great.. keep learning Vidya