I am always follow your tutorials Raghav. Your videos make me very comfortable. Just a question - How to after navigating to the page to make sure it loads to the correct page. Can you have a comment on that what is the command used in Cypress?
HI Vikum To make sure that a page loads to the correct page after navigating to it, you can use the `cy.url()` command in Cypress. The `cy.url()` command will return the current URL of the page. You can then compare the current URL to the expected URL to make sure that they are the same. For example, the following code will navigate to the URL `www.google.com` and then use the `cy.url()` command to make sure that the current URL is the same as the expected URL: ``` cy.visit("www.google.com"); cy.url().should("eq", "www.google.com"); ``` If the current URL is not the same as the expected URL, then the test will fail. Here are some other commands that you can use to make sure that a page loads to the correct page: * `cy.title()`: This command will return the title of the page. * `cy.contains()`: This command will check if the page contains a specific text string. * `cy.get()`: This command will get an element on the page by its selector. You can use these commands to verify that the page has loaded correctly and that it contains the expected content. I hope this helps
Hi, Raghav! Thank you very much for this Cypress course. I have a question :) I am following you step by step and I get this error - Timed out retrying: Expected to find element: .a4bI, but never found it. But here I cannot see milliseconds. What settings should I do in order to be able to see milliseconds?
Hi Sofia The error message "Timed out retrying: Expected to find element: .a4bI, but never found it" means that Selenium was unable to find the element with the CSS selector `.a4bI` after a certain amount of time. This could be due to a number of reasons, such as the element not being present on the page, the element being hidden, or the element being blocked by another element. To be able to see milliseconds in the error message, you need to set the `log_level` setting to `debug`. This can be done by adding the following line to your Cypress configuration file: ``` log_level: debug ``` Once you have set the `log_level` setting to `debug`, you will be able to see milliseconds in the error message, as well as other detailed information about the error. Here is an example of what the error message would look like with milliseconds: ``` Timed out retrying: Expected to find element: .a4bI after 5000ms. Timeouts can be caused by: - The element is not present on the page. - The element is hidden. - The element is blocked by another element. ``` I hope this helps
@@RaghavPal Hi, Raghav! Thank you very much for your reply. I have understood the idea but I cannot find the Cypress configuration file :( I have tried to add the following line "log_level": "debug"" to the cypress.json file, as well as to some other files in the node_modules but most probably I am not adding it to the correct file. Could you please tell me where I can find the correct file?
Very good learning, have one question here. As per changes in July 2022, there is no cypress.json file present in framework. However there is one cypress.config.js present, looks like this is the same file which is mentioned in video. Is there any alternative way to stop running automatically. Can you please confirm ? #AutomationStepbyStep
Hi Raghav! When i searched for "Automation Step by Step"- there was a captcha. after solving captcha, Training by Raghav Was not clicked anyhow!! what should I do?
Hi Raghav, I'm going thru grid which has rows and columns and not all elements exist. Wanted to check text and color when the element exist and do nothing when it does not. For this, I used cy.get('#element-id').should('not.exist'); to check if an elementId exist or not. its working when it does not exist but its failing when it exists. Thx in advance
Habib When using Cypress to check if an element exists and perform actions conditionally, you can use the `.then()` function to access the jQuery object for the body or any other parent element that is guaranteed to exist. From there, you can search for the target element within that object. If the element exists, you can proceed with your checks; if not, you can skip the checks. Here's an example of how you can implement this: ```javascript cy.get('body').then($body => { // Check if the element exists in the body if ($body.find('#element-id').length) { // If the element exists, check its text and color cy.get('#element-id').should('have.text', 'expected text'); cy.get('#element-id').should('have.css', 'color', 'expected color'); } else { // If the element does not exist, do nothing cy.log('#element-id does not exist'); } }); ``` This approach allows you to handle both cases without causing the test to fail when the element exists. It's a more robust way to perform conditional checks in Cypress tests. Remember to replace `#element-id`, `'expected text'`, and `'expected color'` with the actual values you're testing for.
Thanks for the quick answer@@RaghavPal. This is what exactly I did and still it did not work cy.get(`${cellRowCol}`).should('exist').then(($el) => { if ($el) { cy.log("Element Exist"); cy.get(`${cellRowCol}`).trigger('mouseover'); cy.get(`${cellRowCol}`).trigger('mouseout'); } else { cy.log("Element Does Not Exist"); } });
Siva To read multiple Excel rows step by step in Cypress, you can use the 'xlsx' package, which is an external package that can be used to read Excel files in Cypress. Here's a general approach you can follow: First, install the 'read-excel-file' package using npm by running the following command in your terminal: npm i read-excel-file Next, import the package in your Cypress test file: javascript import readXlsxFile from 'read-excel-file'; Then, use the readXlsxFile function to read the Excel file: readXlsxFile('path/to/your/excel/file.xlsx').then((rows) => { // rows is an array of arrays, where each inner array represents a row in the Excel file // you can access each row and its cells like this: rows.forEach((row) => { console.log(row); }); }); You can also use cy.task() to read the Excel file, this way you can handle the file reading in a separate task and then use the data in your test. You can also use cy.readFile() to read the Excel file, but this will return the file content as a string, you will need to parse the string to get the data. You can also use read-excel-file package to read the Excel file and then use the data in your test. Here is an example of how you can use read-excel-file package to read the Excel file and then use the data in your test: import readXlsxFile from 'read-excel-file'; describe('My Test', () => { it('reads excel file', () => { readXlsxFile('path/to/your/excel/file.xlsx').then((rows) => { // rows is an array of arrays, where each inner array represents a row in the Excel file // you can access each row and its cells like this: rows.forEach((row) => { console.log(row); }); }); }); }); You can also use cy.task() to read the Excel file, this way you can handle the file reading in a separate task and then use the data in your test. Here is an example of how you can use cy.task() to read the Excel file and then use the data in your test: describe('My Test', () => { it('reads excel file', () => { cy.task('readExcelFile', 'path/to/your/excel/file.xlsx').then((rows) => { // rows is an array of arrays, where each inner array represents a row in the Excel file // you can access each row and its cells like this: rows.forEach((row) => { console.log(row); }); }); }); }); You can also use cy.readFile() to read the Excel file, but this will return the file content as a string, you will need to parse the string to get the data. describe('My Test', () => { it('reads excel file', () => { cy.readFile('path/to/your/excel/file.xlsx').then((content) => { // content is a string, you need to parse it to get the data const rows = content.split(' '); rows.forEach((row) => { console.log(row); }); }); }); }); Please note that the above examples are just a general approach and you may need to adjust them according to your specific use case. -
How can we handle it? When Cypress detects uncaught errors originating from your application it will automatically fail the current test. This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event.
I'm the First One, Hey Raghav, I got a task of Automation testing of API by using POSTMAN can you or anybody help me with this. I've also watched your POSTMAN series.
I´m in love with your tutorials Raghav. You are an awesome teacher. Thx for your calm detailed explanation
Most welcome
Love from Pakistan. I am not a CS background but your videos make me very comfortable. Your way of teaching is excellent
Thanks Syed
Raghav, you are very soft spoken tutor ever 😍
😊 thank you
Awesome tutorials, like yr calm detailed explanation. Thanks!
You're very welcome Mary
I am always follow your tutorials Raghav. Your videos make me very comfortable.
Just a question - How to after navigating to the page to make sure it loads to the correct page. Can you have a comment on that what is the command used in Cypress?
HI Vikum
To make sure that a page loads to the correct page after navigating to it, you can use the `cy.url()` command in Cypress. The `cy.url()` command will return the current URL of the page. You can then compare the current URL to the expected URL to make sure that they are the same.
For example, the following code will navigate to the URL `www.google.com` and then use the `cy.url()` command to make sure that the current URL is the same as the expected URL:
```
cy.visit("www.google.com");
cy.url().should("eq", "www.google.com");
```
If the current URL is not the same as the expected URL, then the test will fail.
Here are some other commands that you can use to make sure that a page loads to the correct page:
* `cy.title()`: This command will return the title of the page.
* `cy.contains()`: This command will check if the page contains a specific text string.
* `cy.get()`: This command will get an element on the page by its selector.
You can use these commands to verify that the page has loaded correctly and that it contains the expected content.
I hope this helps
@@RaghavPal Thanks Raghav it's really helpful me. I am learning and apply the cypress for my current working company to following your videos
1:47 I hear the sound of fear that the test may not run......
and relief at 1:52 XDD . Anyway, the tutorial is awesome, thank you very much!!!
Thanks for watching István
Outstanding videos. Thank you so much!
Most welcome Jo
Hi, Raghav! Thank you very much for this Cypress course. I have a question :) I am following you step by step and I get this error - Timed out retrying: Expected to find element: .a4bI, but never found it. But here I cannot see milliseconds. What settings should I do in order to be able to see milliseconds?
Hi Sofia
The error message "Timed out retrying: Expected to find element: .a4bI, but never found it" means that Selenium was unable to find the element with the CSS selector `.a4bI` after a certain amount of time. This could be due to a number of reasons, such as the element not being present on the page, the element being hidden, or the element being blocked by another element.
To be able to see milliseconds in the error message, you need to set the `log_level` setting to `debug`. This can be done by adding the following line to your Cypress configuration file:
```
log_level: debug
```
Once you have set the `log_level` setting to `debug`, you will be able to see milliseconds in the error message, as well as other detailed information about the error.
Here is an example of what the error message would look like with milliseconds:
```
Timed out retrying: Expected to find element: .a4bI after 5000ms. Timeouts can be caused by:
- The element is not present on the page.
- The element is hidden.
- The element is blocked by another element.
```
I hope this helps
@@RaghavPal Hi, Raghav! Thank you very much for your reply. I have understood the idea but I cannot find the Cypress configuration file :( I have tried to add the following line "log_level": "debug"" to the cypress.json file, as well as to some other files in the node_modules but most probably I am not adding it to the correct file. Could you please tell me where I can find the correct file?
Please check this github.com/cypress-io/cypress/issues/8393
Can you explain the assertion for card-header have specific title or not ??
Hi Neenu, Can check within command docs.cypress.io/api/commands/within
Very good learning, have one question here.
As per changes in July 2022, there is no cypress.json file present in framework. However there is one cypress.config.js present, looks like this is the same file which is mentioned in video. Is there any alternative way to stop running automatically. Can you please confirm ?
#AutomationStepbyStep
Yes, for Cypress ver 10+ Cypress.config.js file is the configuration file
@@RaghavPal thanks
I dont have a cypress.JSON, which file is the new one? I didnt get it automatically. I have a cypress.config.JSON though
Hi, If you are using cypress ver 10+, there are some changes, Pls check this - ruclips.net/video/VPUA6Ur6Um8/видео.html
You deserved more views
Thanks Jocelyn, hope it will grow with time
Waiting for next video
coming soon Hari
Very good video...
Many many thanks
Hi Raghav! When i searched for "Automation Step by Step"- there was a captcha. after solving captcha, Training by Raghav Was not clicked anyhow!! what should I do?
Umma
are you trying to access this: automationstepbystep.com/trainings-2/
yes.. after solving captcha, , I can't click on "Training by Raghav"@@RaghavPal
not sure, it's working fine here.. give me the link
Great 👍
Thank you
Hi Raghav , the element that you were interacting first seems to be cssSelector way to find it. Does cypress support xpaths as well?
Yes it does Franco
@@RaghavPal seems that we have to confiure plugin for xpaths
hi thanks for your video. {enter} not work in my test that is like your test. what is problem?
Hi, pls check the syntax
cy.get('#password').type('password123{enter}')
thankyou, your video is hopefull
You're welcome
Thanks a lot sirr
Most welcome Praveen
Hi Raghav, I'm going thru grid which has rows and columns and not all elements exist. Wanted to check text and color when the element exist and do nothing when it does not. For this, I used cy.get('#element-id').should('not.exist'); to check if an elementId exist or not. its working when it does not exist but its failing when it exists. Thx in advance
Habib
When using Cypress to check if an element exists and perform actions conditionally, you can use the `.then()` function to access the jQuery object for the body or any other parent element that is guaranteed to exist. From there, you can search for the target element within that object. If the element exists, you can proceed with your checks; if not, you can skip the checks.
Here's an example of how you can implement this:
```javascript
cy.get('body').then($body => {
// Check if the element exists in the body
if ($body.find('#element-id').length) {
// If the element exists, check its text and color
cy.get('#element-id').should('have.text', 'expected text');
cy.get('#element-id').should('have.css', 'color', 'expected color');
} else {
// If the element does not exist, do nothing
cy.log('#element-id does not exist');
}
});
```
This approach allows you to handle both cases without causing the test to fail when the element exists. It's a more robust way to perform conditional checks in Cypress tests. Remember to replace `#element-id`, `'expected text'`, and `'expected color'` with the actual values you're testing for.
Thanks for the quick answer@@RaghavPal. This is what exactly I did and still it did not work
cy.get(`${cellRowCol}`).should('exist').then(($el) => {
if ($el) {
cy.log("Element Exist");
cy.get(`${cellRowCol}`).trigger('mouseover');
cy.get(`${cellRowCol}`).trigger('mouseout');
} else {
cy.log("Element Does Not Exist");
}
});
try checking some online examples..
Thanks@@RaghavPal
Hi Raghav, how to select autocomplete suggested list value.
Hi Rakesh, this can help stackoverflow.com/questions/55831736/how-to-select-cypress-autocomplete-field
Thanks
Most Welcome Sefa
Great Video!! thanks a lot!!
Most welcome Kepler
Thank you very much Sir🙏
Most welcome Poonam
Awesome video, thanks
Glad you liked it!
@@RaghavPal how can upload external document means if i have to browse anything then how can i do?
You can use fileUpload plugin, you can check my Cypress Udemy course - automationstepbystep.com/udemy-discounts/
Hi, Raghav
you made the learning so much attractive. I ask #youtube to add multiple like buttons under your videos!!!!:)
Thanks a ton Enver
Hi, I got a problem when accessing element from ng-content component. how can I access the from ng-content component.
I will add a session Akash, this can help stackoverflow.com/questions/53664878/click-on-ng-if-value-from-cypress
Hi Raghav, could you please make a video of testing maps and scroll it from left to right and top to bottom using mouse events.
I will check on this Karthik
DOM sanpshot is missing when I open my cypress, Pleas help
Can restart and check
How do I read multiple Excel rows step by step?
Siva
To read multiple Excel rows step by step in Cypress, you can use the 'xlsx' package, which is an external package that can be used to read Excel files in Cypress.
Here's a general approach you can follow:
First, install the 'read-excel-file' package using npm by running the following command in your terminal:
npm i read-excel-file
Next, import the package in your Cypress test file:
javascript
import readXlsxFile from 'read-excel-file';
Then, use the readXlsxFile function to read the Excel file:
readXlsxFile('path/to/your/excel/file.xlsx').then((rows) => {
// rows is an array of arrays, where each inner array represents a row in the Excel file
// you can access each row and its cells like this:
rows.forEach((row) => {
console.log(row);
});
});
You can also use cy.task() to read the Excel file, this way you can handle the file reading in a separate task and then use the data in your test.
You can also use cy.readFile() to read the Excel file, but this will return the file content as a string, you will need to parse the string to get the data.
You can also use read-excel-file package to read the Excel file and then use the data in your test.
Here is an example of how you can use read-excel-file package to read the Excel file and then use the data in your test:
import readXlsxFile from 'read-excel-file';
describe('My Test', () => {
it('reads excel file', () => {
readXlsxFile('path/to/your/excel/file.xlsx').then((rows) => {
// rows is an array of arrays, where each inner array represents a row in the Excel file
// you can access each row and its cells like this:
rows.forEach((row) => {
console.log(row);
});
});
});
});
You can also use cy.task() to read the Excel file, this way you can handle the file reading in a separate task and then use the data in your test.
Here is an example of how you can use cy.task() to read the Excel file and then use the data in your test:
describe('My Test', () => {
it('reads excel file', () => {
cy.task('readExcelFile', 'path/to/your/excel/file.xlsx').then((rows) => {
// rows is an array of arrays, where each inner array represents a row in the Excel file
// you can access each row and its cells like this:
rows.forEach((row) => {
console.log(row);
});
});
});
});
You can also use cy.readFile() to read the Excel file, but this will return the file content as a string, you will need to parse the string to get the data.
describe('My Test', () => {
it('reads excel file', () => {
cy.readFile('path/to/your/excel/file.xlsx').then((content) => {
// content is a string, you need to parse it to get the data
const rows = content.split('
');
rows.forEach((row) => {
console.log(row);
});
});
});
});
Please note that the above examples are just a general approach and you may need to adjust them according to your specific use case.
-
How can we handle it?
When Cypress detects uncaught errors originating from your application it will automatically fail the current test.
This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event.
Hi Vamsi, thanks for adding
just amazing
Thanks a lot
How to remove recaptcha from browser, because it appeared each time and very difficult to deal with....
You can talk to your dev team to disable it in testing env, Pls check this ruclips.net/video/QIYbr81dJGQ/видео.html
Whoops, there is no test to run. while clicking on Login in my application
Pls check if you have added any test files in Integration folder, start cypress ui again
npx cypress open
Any solution
This will help Ali ruclips.net/video/QIYbr81dJGQ/видео.html
I'm the First One, Hey Raghav, I got a task of Automation testing of API by using POSTMAN can you or anybody help me with this. I've also watched your POSTMAN series.
Hi Anil, all api test automation tutorials are in Postman series, pls check if you have watched all - automationstepbystep.com/