TestCafe | 2 | Actions - Part 1 | Step-by-Step for Beginners

[@sonalahluwalia]

Hi Raghav. Your vedios really very helpful.
I am facing an issue in automation of my website using Selenium webdriver with C#. Issue is, application is created in react and there is no reference point to locate elements. In this case I have to locate all elements by absolute Xpath. Which is also changing after each release.
Is there any better way to solve this issue.
Regards.

[@RaghavPal]

Drishti
Yes, there are a few better ways to solve the issue of locating elements in a React application using Selenium WebDriver with C#.
One way is to use CSS selectors instead of XPath. CSS selectors are more specific and less likely to change than XPath expressions. For example, you could use the following CSS selector to locate the input field with the ID `username`:
```
#username
```
Another way to locate elements in a React application is to use the `data-*` attributes. React applications often use `data-*` attributes to store information about elements. For example, you could use the following CSS selector to locate the input field with the data attribute `data-testid="username"`:
```
[data-testid="username"]
```
Finally, you can also use the `waitForElement()` method to wait for an element to appear before trying to locate it. This can be helpful if the element is not immediately visible or if its appearance is delayed. For example, the following code will wait for the input field with the ID `username` to appear before trying to locate it:
```c#
// Wait for the element to appear.
var usernameInput = WebDriverWait.For(driver).Until(ExpectedConditions.ElementExists(By.Id("username")));
// Locate the element and interact with it.
usernameInput.SendKeys("username");
```
Using any of these methods will make your automation tests more robust and less likely to break after a release.
In addition to the above methods, you can also use a test automation framework that supports React applications. Some popular frameworks include:
* Cypress
* Playwright
* TestCafe
These frameworks provide built-in support for locating and interacting with elements in React applications. They also provide other features that can make your test automation more efficient, such as automatic waiting and screenshot capturing.
I hope this helps

[@sonalahluwalia]

@@RaghavPal Thanks you for your help.

[@sonalahluwalia]

@@RaghavPal
I have html like above with some more parameters.
Here how can I use Css selector as same class used by many elements on this page

[@RaghavPal]

To use a CSS selector to locate an element with a class that is used by many elements on the page, you can use the `:nth-of-type()` pseudo-class. The `:nth-of-type()` pseudo-class allows you to select a specific element based on its order within a group of elements with the same class.
For example, the following CSS selector will select the second element with the class `abc`:
```css
.abc:nth-of-type(2)
```
To select the third element with the class `abc`, you would use the following CSS selector:
```css
.abc:nth-of-type(3)
```
You can also use the `:first-of-type()` and `:last-of-type()` pseudo-classes to select the first and last elements with a specific class, respectively.
For example, the following CSS selector will select the first element with the class `abc`:
```css
.abc:first-of-type
```
The following CSS selector will select the last element with the class `abc`:
```css
.abc:last-of-type
```
You can also use the `:nth-child()` pseudo-class to select a specific element based on its order within a group of elements with the same parent element.
For example, the following CSS selector will select the second element with the class `abc` that is a child of the element with the ID `my-element`:
```css
#my-element .abc:nth-child(2)
```
You can use the CSS selectors described above to locate elements with a class that is used by many elements on the page. This can be useful for cases where you need to interact with a specific element with a specific class.

[@sonalahluwalia]

@@RaghavPal
Thanks Raghav. Thanks a lot.

[@ZeeshanGill89]

Sir do we need to lean JavaScript first in order to use Testcafe?

[@RaghavPal]

Zeeshan
To use TestCafe you don't necessarily need to be an expert in JavaScript to get started with TestCafe.
TestCafe provides a high-level API that abstracts away many of the complexities of working with JavaScript. This means you can write tests using TestCafe without needing to be an expert in JavaScript. However, having some basic knowledge of JavaScript concepts, such as variables, functions, and conditional statements, will still be helpful
-

[@ZeeshanGill89]

@@RaghavPal Thank you sir

[@ZeeshanGill89]

@@RaghavPal Also is Testcafe better and easier to use than Selenium?

[@RaghavPal]

Zeeshan
Both TestCafe and Selenium offer powerful capabilities for web testing, but the choice between them depends on specific project requirements. Here's a quick comparison:
- TestCafe provides simplicity and rapid setup, making it ideal for projects requiring quick deployment and straightforward scripting in JavaScript or TypeScript. It doesn't rely on WebDriver or external plugins, and you can test across multiple browsers without additional setup
- Selenium, on the other hand, offers extensive language support and detailed control. It's well-suited for complex testing scenarios across various environments
Consider your project needs and preferences to decide which tool aligns better with your requirements
-

[@ZeeshanGill89]

@@RaghavPal Thank you sir

[@ishanpal9779]

👍

[@RaghavPal]

:)

[@selectivestudy143]

0:16 0:20 0:21 0:22 aur aap kahan se hain main aapse Milana chahta hun main aapko coaching mein class karna chahta hun offline ke madhyam se please apna number share Karen main baat karunga

[@RaghavPal]

Can let me know your queries here