NodeJs-Cucumber-Selenium reviews and mentions

• Automated Monkey Testing with Selenium & WebDriverIO (Examples)
  1 project | dev.to | 22 Jun 2022

  const assert = require("assert"); describe("Open Web browser in the chrome", () => { it("Page should open", () => { browser.url("https://www.lambdatest.com/"); const title = browser.getTitle(); assert.strictEqual( title, "Cross Browser Testing Tools | Free Automated Website Testing | LambdaTest" ); }); }); describe("Perform Random click", () => { it("Random click on Header Menu should perform based on random index ", () => { const headerMenuLinks = $$(".//div[@id='navbarSupportedContent']/ul/li"); const linksCount = headerMenuLinks.length; for (i = 0; i < linksCount - 1; i++) { let randomIndex = Math.floor(Math.random() * linksCount); headerMenuLinks[randomIndex].click(); browser.back(); browser.pause(3000); } }); });

• Top 17 UI Design Mistakes That Lead to Failure of Your Website
  1 project | dev.to | 2 Jun 2022

  The above image is a demonstration of the unique div on LambdaTest platform. You can notice how the appearance is differing from Google Chrome to Mozilla Firefox. LambdaTest is a cross browser testing tool that allows you to test your website’s RWD(Responsive Web Design) among 3000+browsers and their assorted versions running on real operating systems.

• If your school WiFi blocks websites, you can use this virtual browser as a workaround. Actually, does anyone have a fully free version?
  1 project | reddit.com/r/InternetIsBeautiful | 18 May 2022
• LAMBDATEST
  1 project | dev.to | 15 May 2022

  To use LambdaTest and perform the testing of your web application, you first have to sign up for the same. Step 1 - Go to LambdaTest. Step 2 - Select the option to Free Sign Up in the top right corner of the home page. Step 3 - Fill Up your details in the sign-up form and press SignUp. Step 4 -Verify your email address by typing the pin sent to your email address. Then press Verify. As you press verify, you will be signed up and the account will be created for you. Once all this is done, your personal dashboard will open up. This is your main dashboard and will give you the overall summary of the performance and tests you have executed. Let's see what these different sections in the dashboard mean.

• Top Mistakes To Avoid During Responsive Web Design
  1 project | dev.to | 10 May 2022

  Keep on testing your website and observe the market. Use cloud-based testing platforms like LambdaTest whenever a new mobile device is launched and check if your website is rendered properly in it. Perfrom screen resolution tests.

• How To Get Text Of An Element In Selenium?
  1 project | dev.to | 10 May 2022

  package getText; import java.net.MalformedURLException; import java.net.URL; import org.openqa.selenium.remote.DesiredCapabilities; import org.openqa.selenium.remote.RemoteWebDriver; import org.testng.annotations.AfterTest; import org.testng.annotations.BeforeTest; import org.testng.annotations.Test; public class TestClass { public String username = "YOUR_USERNAME"; public String accesskey = "YOUR_ACCESS_KEY"; public static RemoteWebDriver driver = null; public String gridURL = "@hub.lambdatest.com/wd/hub"; boolean status = false; @BeforeTest public void setUp(){ //You need to set desired capabilities which you can generate from Capability Generator from Lambda Test as per your requirements DesiredCapabilities capabilities = new DesiredCapabilities(); capabilities.setCapability("browserName", "chrome"); capabilities.setCapability("version", "81.0"); capabilities.setCapability("platform", "win10"); // If this cap isn't specified, it will get any available one capabilities.setCapability("build", "LambdaTestProject"); capabilities.setCapability("name", "LambdaTestGetTextProject"); capabilities.setCapability("network", true); // Enables network logs capabilities.setCapability("visual", true); // Enables step by step screenshot capabilities.setCapability("video", true); // Enables video recording capabilities.setCapability("console", true); // Captures console logs try { driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities); } catch (MalformedURLException e) { System.out.println("Invalid grid URL"); } catch (Exception e) { System.out.println(e.getMessage()); } } @Test public void testMethod(){ driver.get("https://www.lambdatest.com/"); driver.manage().window().maximize(); System.out.println("The title of the page is - "+driver.getTitle()); } @AfterTest public void tearDown(){ driver.quit(); } }

• How To Use JavaScriptExecutor in Selenium WebDriver?
  1 project | dev.to | 22 Apr 2022
• How To Use TestNG Reporter Log In Selenium
  1 project | dev.to | 19 Apr 2022

  package LamdaTest; import org.openqa.selenium.By; import org.openqa.selenium.WebElement; import org.openqa.selenium.remote.DesiredCapabilities; import org.openqa.selenium.remote.RemoteWebDriver; import org.testng.Assert; import org.testng.Reporter; import org.testng.annotations.AfterTest; import org.testng.annotations.BeforeTest; import org.testng.annotations.Listeners; import org.testng.annotations.Test; import java.net.MalformedURLException; import java.net.URL; @Listeners({util.Listener.class}) class ReporterTest { public String username = "YOUR USERNAME"; public String accesskey = "YOUR ACCESSKEY"; public static RemoteWebDriver driver = null; public String gridURL = "@hub.lambdatest.com/wd/hub"; @BeforeTest public void setUp() throws Exception { DesiredCapabilities capabilities = new DesiredCapabilities(); capabilities.setCapability("browserName", "chrome"); capabilities.setCapability("version", "93.0"); capabilities.setCapability("platform", "win10"); // If this cap isn't specified, it will just get the any available one capabilities.setCapability("build", "TestNGReporterLog"); capabilities.setCapability("name", "TestNGReporterLogSample"); try { driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities); } catch (MalformedURLException e) { System.out.println("Invalid grid URL"); } catch (Exception e) { System.out.println(e.getMessage()); } } @Test public void learnSingleInputFieldUsingSelenium() { try { Reporter.log("Logging into Selenium Playground"); driver.get("https://www.lambdatest.com/selenium-playground/"); Reporter.log("Logged into Selenium Playground. Now, Clicking On Simple Form Demo", true); //Clicks on the simple form demo option in the selenium playground WebElement simpleFormDemo = driver.findElement(By.xpath("//a[text()='Simple Form Demo']")); simpleFormDemo.click(); Reporter.log("Clicked successfully on Simple Form Demo option.", 2); //Enters the message in the enter message input box WebElement messageInputBox = driver.findElement(By.xpath("//input[@id='user-message']")); messageInputBox.sendKeys("Running my first testcase using Lambda Test"); //Clicks on Show Message button WebElement showMessageButton = driver.findElement(By.xpath("//button[text()='Show Message']")); showMessageButton.click(); //Retrieves the entered user message WebElement userMessage = driver.findElement(By.xpath("//label[text()='Your Message: ']//parent::div//span")); String actualUserText = userMessage.getText(); Reporter.log("Actual User Input Is: " + actualUserText, 2, true); Assert.assertTrue(actualUserText.equals("Running my first testcase using Lambda Test"), "Expected and actual texts do not match."); } catch (Exception e) { } } @Test public void learnMultipleInputFieldUsingSelenium() { try { Reporter.log("Logging into Selenium Playground"); driver.get("https://www.lambdatest.com/selenium-playground/"); Reporter.log("Logged into Selenium Playground. Now, Clicking On Simple Form Demo", true); WebElement simpleFormDemo = driver.findElement(By.xpath("//a[text()='Simple Form Demo']")); simpleFormDemo.click(); Reporter.log("Clicked successfully on Simple Form Demo option For Multiple input fields.", 2); WebElement firstInputBox = driver.findElement(By.xpath("//input[@id='sum1']")); firstInputBox.sendKeys("2"); WebElement secondInputBox = driver.findElement(By.xpath("//input[@id='sum2']")); secondInputBox.sendKeys("2"); WebElement getTotalButton = driver.findElement(By.xpath("//button[text()='Get Total']")); getTotalButton.click(); WebElement userMessage = driver.findElement(By.xpath("//label[text()='Total a + b = ']//parent::div//span")); String actualUserText = userMessage.getText(); Reporter.log("The total of the two entered user inputs is: " + actualUserText, 2, true); Assert.assertTrue(actualUserText.equals("4"), "Expected and actual texts do not match."); } catch (Exception e) { } } @AfterTest public void closeBrowser() { driver.close(); Reporter.log("The driver has been closed.", false); } }

• Any Tools to Test Website on Specific Device/Web Browser?
  1 project | reddit.com/r/userexperience | 17 Apr 2022
• Guide To Selenium WebDriver: Getting Started With Test Automation [Tutorial]
  1 project | dev.to | 13 Apr 2022

  driver.get("https://www.google.com/"); // Opens a new window and switches to new window driver.switchTo().newWindow(WindowType.WINDOW); // Opens LambdaTest homepage in the newly opened window driver.navigate().to("https://www.lambdatest.com/");

• Beginner to VMs, have spent $80 of credits in just over a week on one instance, is there a cheaper way?
  1 project | reddit.com/r/AZURE | 9 Apr 2022

  If you just want a remote browser maybe try services that offer that directly. Like https://www.lambdatest.com/ and https://www.browserstack.com/

• 21 Best React Component Libraries To Try In 2021
  4 projects | dev.to | 8 Apr 2022

  import React from "react"; import ReactDOM from "react-dom"; import useForm from "react-hook-form"; import "./styles.css"; // Messages const required = "This field is required"; const maxLength = "Your input exceed maximum length"; // Error Component const errorMessage = error => { return {error}; }; export default function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = data => console.log(data); return ( React Hook Form {errors.Username && errors.Username.type === "required" && errorMessage(required)} {errors.Username && errors.Username.type === "maxLength" && errorMessage(maxLength)} {errors.Name && errors.Name.type === "required" && errorMessage(required)} {errors.Name && errors.Name.type === "maxLength" && errorMessage(maxLength)} {errors.MobileNumber && errors.MobileNumber.type === "maxLength" && errorMessage(maxLength)} {errors.Email && errors.Email.type === "required" && errorMessage(required)} {errors.Password && errors.Password.type === "required" && errorMessage(required)} Gender Male Female {errors.DateofBirth && errorMessage("Please use the following format MM/DD/YYYY")}

  By clicking this, you are agreeing to our terms & services.

  ); } const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);

  Enter fullscreen mode Exit fullscreen mode

  Output

  

  9. Redux

  

  When it comes to state management libraries, the one that comes to our mind is Redux. Redux also comes under the category of best component libraries with 20.9k GitHub stars and 3k forks. Although it is meant to be used with the library components of React UI, you can also use it with Vue, Angular, Ember, and other JS frameworks.

  Redux helps to connect React components to pieces of state by decreasing the need for props or callbacks. The library is often termed as a developer’s best friend. It helps you to write consistent codes and is environment-friendly. You can also edit the code while your app is live. React Native has an official Redux library — React-Redux.

  Installation
  

  npm install @reduxjs/toolkit
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import React from "react";
      import { render } from "react-dom";
      import { Provider } from "react-redux";
  
      import store from "./store";
      import Page from "./Page";
  
      const App = () => (
        
          
        
      );
  
      render(, document.getElementById("root"));
  

  Enter fullscreen mode Exit fullscreen mode

  10. React 360

  We live in the age of augmented and virtual reality. Nowadays, most businesses, especially retail or e-commerce, provide AR/VR experience to try out their product virtually. It would be pretty helpful if you could create an AR/VR experience in React, won’t it?

  React 360 is yet another best React library to help you create VR and 360 experiences using React. Whatever you create runs smoothly on mobiles, desktop as well as VR devices. The goal of this library is to simplify the process of creating complex VR and 3D UI. Just like its predecessor, React VR, this library also boasts of providing an engaging experience to its users by using familiar concepts and tools.

  Installation

  Before installing the React 360, ensure you have NodeJS installed in your machine.
  

      $ npm install -g react-360-cli
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import React from "react";
      import ReactDOM from "react-dom";
      import React360 from "./React360";
  
      import "./styles.css";
  
      function App() {
        return (
          
  
            
  Hello CodeSandbox
            
  Start editing to see some magic happen!
            
            
          
        );
      }
  
      const rootElement = document.getElementById("root");
      ReactDOM.render(, rootElement);
  
  

  Enter fullscreen mode Exit fullscreen mode

  Output

  

  11. FABRICS React

  

  Developed by Microsoft, Fabrics React is among the best component libraries that provide an MS Office-like experience. The components that you will find in Fabrics React are developed using the latest frameworks like SASS, ES6, and Webpack. All of the components are simplistic in design, thus making them easier to use.

  Developers can use them by easily integrating with libraries like redux-form. You can use the library on all platforms like mobile, laptop, desktop, and even Office365 or OneNote. The FABRIC core is a set of SASS components combined with CSS classes, allowing access to various colors, animations, etc.

  Installation
  

      $ npm install --save react-fabric
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import React from 'react'
      import { render } from 'react-dom'
      import 'fabric-webpack'
  
      import DesignCanvas from './DesignCanvas'
      import Rect from './Rect'
      import Circle from './Circle'
      import Image from './Image'
  
      const App = () => (
        
  
          
            
            
            
          
        
      )
  
      render(, document.getElementById('root'))
  

  Enter fullscreen mode Exit fullscreen mode

  12. React Virtualized

  

  React Virtualized is among the best React grid libraries that target specific aspects of a user interface. With 21.6k GitHub stars and 2.7k forks, React Virtualized is developed for solving a single goal — render tables and list efficiently on your page. You may think that rendering a table is not that much difficult. Well, it is when your table has thousands of elements. The library is trying to tackle this kind of exceptional case.

  In addition, web developers can add various JavaScript-based usability features to their interfaces, such as an infinite loader, window scroller, arrow key stepper, cell measurer, auto sizer, and so on.

  Installation
  

      npm install react-virtualized --save
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import React from 'react';
      import { render } from 'react-dom';
      import UserForm from './UserForm';
  
      const imaginaryUser = {
        email: '',
        username: '',
        imaginaryThingId: null,
      };
  
      const App = () => (
        
  
          
        
      );
  
      render(, document.getElementById('root'));
  

  Enter fullscreen mode Exit fullscreen mode

  13. React Desktop

  

  React Desktop is a JavaScript-based and library built on React. The goal of this library is to bring the experience of using a native desktop on the web. It supports multiple windows and macOS components like Checkbox, dialogue, radio, nav pane, etc. The library has a rating of more than 8k stars on GitHub.

  React Desktop is one of the best React libraries to create web apps that help to provide various javascript Developers can effectively replicate the user interface provided by both Windows and macOS by using the UI components from the React Desktop library. It facilitates a streamlined process from a native desktop application to a web application.

  Installation
  

      npm install react-desktop --save
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import React from "react";
      import { Button, TitleBar, Toolbar, SearchField } from "react-desktop/macOs";
      import "./styles.css";
  
      export default function App() {
        return (
          <>
            
              
            
  
      
              
                
              
            
  
       console.log("Clicked!")}>
              Press me!
            
          >
        );
      }
  
  

  Enter fullscreen mode Exit fullscreen mode

  14. Chakra UI

  

  Chakra UI is a React component library that aims for developers to spend less time in writing codes and more time building a great user experience for the users. It gives you modular, accessible, and simple UI components that you need for building apps.

  • The components are accessible and follow WAI-ARIA standards.

  • You can customize the components easily to match your design specs.

  • You will have both light and dark UI themes. The components are designed with composition as the primary goal. You can create new components easily.

  • The community of Chakra UI is very active. You will get all the help required whenever you feel stuck.

  Installation
  

   npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import React from "react";
      import ReactDOM from "react-dom";
      import Header from "./header";
      import { theme, ThemeProvider, CSSReset } from "[@chakra](http://twitter.com/chakra)-ui/core";
  
      const breakpoints = ["360px", "768px", "1024px", "1440px"];
      breakpoints.sm = breakpoints[0];
      breakpoints.md = breakpoints[1];
      breakpoints.lg = breakpoints[2];
      breakpoints.xl = breakpoints[3];
  
      const newTheme = {
        ...theme,
        breakpoints
      };
  
      function App() {
        return (
          
            
            
          
        );
      }
  
      const rootElement = document.getElementById("root");
      ReactDOM.render(, rootElement);
  

  Enter fullscreen mode Exit fullscreen mode

  15. React Final Form

  

  React Final Form is yet another best React component library. It is a subscription-based library for the state of form management in React. The library was designed to be modular. When your signup form has just a few fields, why do you need to download a large and complex code that is meant for handling hundreds of fields?

  The developer just needs to put some pieces together and create a customized library based on their requirements. A developer should worry about bundle size if he thinks of performance. React final form provides a lean solution of form management with a library that occupies only 5.4kb. It offers hooks API so that you can flexibly compose the features of your form. The best feature of this library is, the form elements get notified whenever there is some change in the form’s state.

  Installation

  Via npm
  

      npm install --save final-form react-final-form
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  
  
   import React from 'react'
      import { render } from 'react-dom'
      import Styles from './Styles'
      import { Form, Field } from 'react-final-form'
  
      const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
  
      const onSubmit = async values => {
        await sleep(300)
        window.alert(JSON.stringify(values, 0, 2))
      }
  
      const App = () => (
        
          
  🏁 React Final Form - Simple Example
          
            Read Docs
          
           (
              
                
  
                  First Name
                  
                
                
  
                  Last Name
                  
                
  
                
  
                  Favorite Color
                  
                    
                    ❤️ Red
                    💚 Green
                    💙 Blue
                  
                
                
  
                  Toppings
                  
                    🐓 Chicken
                    🐷 Ham
                    🍄 Mushrooms
  
                  
                
  
  
                
  
                  Notes
                  
                
                
  
                  
                    Submit
                  
                  
                    Reset
                  
                
                
  {JSON.stringify(values, 0, 2)}
              
            )}
          />
        
      )
  
      render(, document.getElementById("root"));
  

  Enter fullscreen mode Exit fullscreen mode

  Output

  

  16. Styled Components

  

  If you are using traditional CSS in your React app, you may often face problems by accidentally overwriting a selector that you have used at another place.

  Styled Components is one of the best React libraries that help you to organize your project. You can build reusable components to customize the look of your app. And the issue that we discussed earlier? You can avoid that by directly using a CSS syntax inside your components. The library is quite popular and used by popular sites like IMDb, Reddit, Vimeo, Coinbase, and many others.

  Installation
  

      npm i styled-components
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import React from "react";
      import { render } from "react-dom";
      import { Button, th } from "smooth-ui";
      import { darken } from "polished";
  
      // Simple extend
      const BlueButton = Button.extend`
        background-color: blue !important;
        color: white !important;
      `;
  
      // Use props & theme in extend
      const BorderedButton = Button.extend`
        border: 1px solid ${props => th(props.variant, color => darken(0.1, color))};
  
      &:hover {
          border-color: ${props => th(props.variant, color => darken(0.3, color))};
        }
      `;
  
      // Modify component
      const LinkBorderedButton = BorderedButton.withComponent("a");
  
      const App = () => (
        
  
          Yes blue
          Smooth Button
          This is a link
        
      );
  
      render(, document.getElementById("root"));
  

  Enter fullscreen mode Exit fullscreen mode

  Output

  

  17. OnsenUI

  

  Nowadays, almost all companies work with developing cross-browser compatible mobile apps. If you are an app developer who has often faced the pain of dealing with device or OS-compatible issues, you should be interested in OnsenUI.

  OnSenUI is yet another best component library for React that uses JavaScript and HTML5 and integrates with React, Vue, and Angular. The components get styled automatically based on the platform. It means a single source code works in both Android and iOS. Although the collection of elements use pure CSS, there are custom elements for helping you out if you want some more detailing.

  Installation
  

      npm install onsenui
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  
  
  import React from "react";
      import { render } from "react-dom";
      import ons from "onsenui";
      import {
        Splitter,
        SplitterSide,
        SplitterContent,
        Page,
        Toolbar,
        ToolbarButton,
        Icon
      } from "react-onsenui";
  
      class MyPage extends React.Component {
        state = { isOpen: false };
        hide=()=> {
          this.setState({ isOpen: false });
        }
  
      show = () => {
          this.setState({ isOpen: true });
        }
        renderToolbar() {
          return (
            
              
  My app!
              
  
                
                  
                
              
            
          );
        }
        render() {
          return (
            
              
                
              
              
                
                  
                    
  Swipe right to open the menu.
                  
                
              
            
          );
        }
      }
  
      render(, document.getElementById("root"));
  
  

  Enter fullscreen mode Exit fullscreen mode

  Output

  

  18. Enzyme

  We have Jasmine or Karma for testing JavaScript or Angular. A library dedicated to testing React apps would be great. Enzyme is among the best React libraries that allows you to manipulate, transverse, and simulate the output of React components so that you achieve the desired result. Unlike other testing libraries, it is more straightforward and valuable.

  It has the power to mimic jQuery API and DOM, thus more flexible and intuitive. Enzyme also offers a unique API known as Shallow Rendering API. This API allows you to test only the components that you feel to be necessary as per your requirement. Thus ensuring that your application is not overloaded by testing multiple components at any point in time.

  Installation
  

      npm i --save-dev enzyme enzyme-adapter-react-16
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import React from "react";
      import ReactDOM from "react-dom";
  
      import "./styles.css";
  
      function App() {
        return (
          
  
            
  Hello CodeSandbox
            
  Start editing to see some magic happen!
          
        );
      }
  
      const rootElement = document.getElementById("root");
      ReactDOM.render(, rootElement);
  

  Enter fullscreen mode Exit fullscreen mode

  Output

  

  19. React Admin

  

  With over 12k stars on GitHub, React Admin is also considered one of the best React libraries to use if you are developing B2B admin apps based on GraphQL or REST API. The library allows you to customize the design of such apps. It is built with a collection of well-known libraries like Material UI, Redux, and React Router.

  Although developers mostly use the free version, React Admin also has an enterprise version. The enterprise version provides professional support from the creators, along with access to specific components of private modules.

  Installation
  

      npm install react-admin
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import * as React from 'react';
      import PostIcon from '[@material](http://twitter.com/material)-ui/icons/Book';
      import UserIcon from '[@material](http://twitter.com/material)-ui/icons/Group';
      import { Admin, Resource, ListGuesser } from 'react-admin';
      import jsonServerProvider from 'ra-data-json-server';
  
      import { PostList, PostEdit, PostCreate, PostShow } from './posts';
      import { UserList } from './users';
      import Dashboard from './Dashboard';
      import authProvider from './authProvider';
  
      const App = () => (
          
              
              
              
          
      );
      export default App;
  

  Enter fullscreen mode Exit fullscreen mode

  20. React Toolbox

  

  React Toolbox is a collection of React components that work by implementing Google’s material design. Powered by CSS, the library integrates with your webpack workflow., apart from giving you the liberty of using any other module binder.

  While working with this library, you can import the components in bundles, or, if you want to skip importing unwanted bundles or CSS, you can import them in raw form.

  Installation
  

      $ npm install --save react-toolbox
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import React from "react"
      import { render } from "react-dom"
      import ThemeProvider from "react-toolbox/lib/ThemeProvider"
  
      import markdownToReact from "./markdownToReact"
      import theme from "./assets/react-toolbox/theme"
      import "./assets/react-toolbox/theme.css"
  
      const content = markdownToReact(
      `# Hello
  
      !Icon[add](Add){ floating accent }
      !Icon[bookmark](Bookmark){ raised primary label="Bookmark" }`
      )
  
      const styles = {
        fontFamily: "sans-serif",
        textAlign: "center",
      }
  
      const App = () => (
        
          
  
            { content }
          
        
      )
  
      render(, document.getElementById('root'))
  

  Enter fullscreen mode Exit fullscreen mode

  21. React Suite

  

  React developers prefer a library that is designed not only for UI but also backend and middle platforms. React Suite is also considered one of the best React libraries that provide those mentioned above all the necessary components to create an interactive app and a friendly experience for a developer.

  The library supports all major browsers like Chrome, Edge, IE, Firefox, and Safari. However, IE 9 is no longer supported. Apart from cross-browser support, the library also supports server-side rendering. If you are using React suite, you will get the support of Next.js for building web apps.

  Installation
  

      npm i [email protected] --save
  
  

  Enter fullscreen mode Exit fullscreen mode

  Example
  

  import React from "react";
      import { render } from "react-dom";
      import { Button } from "rsuite";
  
      const styles = {
        padding: 20,
        textAlign: "center"
      };
  
      const App = () => (
        
  
          Hello World
        
      );
  
      render(, document.getElementById("root"));
  
  

  Enter fullscreen mode Exit fullscreen mode

  Output

  

  url-encode - URL encoding provides a way to convert special characters into a format that can be sent over the Internet.

  Wrapping Up!

  Once you’ve developed the application with any of the above-mentioned frameworks, you can perform browser compatibility testing of your web application to check whether it renders correctly across different browsers and operating systems. LambdaTest is a cloud-based testing tool that enables you to test your website across 3000+ browsers and OS combinations.

  You can also perform mobile responsive testing of your website to check its responsive web design. LT Browser is a developer-friendly tool that lets you check your website across 50+ pre-built device viewports for mobiles, tablets, desktops, and even laptops.

  That’s all from our side. Although there are multiple other React libraries that developers find helpful, we have discussed the best ones. Also, let us know if you have used any other library that surpasses the usability of the ones mentioned in the list. We hope you had a pleasant experience reading this blog, and it proves to be valuable for any React developer.

• How To Handle Multiple Windows In Selenium WebDriver Using Java?
  1 project | dev.to | 6 Apr 2022

  package LambdaTest; import io.github.bonigarcia.wdm.WebDriverManager; import org.openqa.selenium.By; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.remote.DesiredCapabilities; import org.openqa.selenium.remote.RemoteWebDriver; import org.testng.Assert; import org.testng.Reporter; import org.testng.annotations.AfterTest; import org.testng.annotations.BeforeTest; import org.testng.annotations.Listeners; import org.testng.annotations.Test; import org.testng.reporters.jq.Main; import java.net.MalformedURLException; import java.net.URL; import java.util.Iterator; import java.util.Set; [@Listeners](http://twitter.com/Listeners)({util.Listener.class}) class MultipleWindowsInSelenium { public String username = "YOUR USERNAME"; public String accesskey = "YOUR ACCESSKEY"; public static RemoteWebDriver driver = null; public String gridURL = "[@hub](http://twitter.com/hub).lambdatest.com/wd/hub"; [@BeforeTest](http://twitter.com/BeforeTest) public void setUp() throws Exception { DesiredCapabilities capabilities = new DesiredCapabilities(); capabilities.setCapability("browserName", "chrome"); capabilities.setCapability("version", "97.0"); capabilities.setCapability("platform", "win10"); // If this cap isn't specified, it will just get the any available one capabilities.setCapability("build", "MultipleWindowsInSelenium"); capabilities.setCapability("name", "MultipleWindowsInSeleniumTest"); try { driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities); } catch (MalformedURLException e) { System.out.println("Invalid grid URL"); } catch (Exception e) { System.out.println(e.getMessage()); } driver.get("[https://www.lambdatest.com/selenium-playground/window-popup-modal-demo](https://www.lambdatest.com/selenium-playground/window-popup-modal-demo)"); } [@Test](http://twitter.com/Test) public void multipleWindowPopUp() { try { //Clicks on the follow on twitter and facebook option WebElement followOnTwitterAndFacebook = driver.findElement(By.xpath("//a[text()='Follow Twitter & Facebook']")); followOnTwitterAndFacebook.click(); // To handle parent window String MainWindow = driver.getWindowHandle(); System.out.println("Main window handle is " + MainWindow); // To handle child window Set s1 = driver.getWindowHandles(); System.out.println("Child window handle is" + s1); Iterator i1 = s1.iterator(); while (i1.hasNext()) { String ChildWindow = i1.next(); if (!MainWindow.equalsIgnoreCase(ChildWindow)) { driver.switchTo().window(ChildWindow); String pageTitle=driver.getTitle(); System.out.println("The web page title of child window is:"+pageTitle); if(pageTitle.contains("Facebook")){ WebElement signUpForFB= driver.findElement(By.xpath("//span[text()='Create New Account']")); signUpForFB.click(); System.out.println("Clicked on Login Option For Facebook"); }else if(pageTitle.contains("Twitter")){ WebElement signUpForTwitter= driver.findElement(By.xpath("//span[text()='Sign up for Twitter']")); signUpForTwitter.click(); System.out.println("Clicked on Follow Option For Twitter"); } } } } catch (Exception e) { e.printStackTrace(); } } [@AfterClass](http://twitter.com/AfterClass) public void closeBrowser() { driver.quit(); System.out.println("Closing the browser"); } }

• Page Factory in Selenium For Web Automation Testing
  1 project | dev.to | 10 Mar 2022

  package com.pagefact.tests; import com.pagefact.pages.*; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import java.net.MalformedURLException; import java.net.URL; import java.time.Duration; import java.util.concurrent.TimeUnit; /* TestNG framework is used instead of JUnit */ /* Tests triggered via testng.xml */ import org.openqa.selenium.chrome.ChromeOptions; import org.openqa.selenium.remote.DesiredCapabilities; import org.openqa.selenium.remote.RemoteWebDriver; import org.testng.Assert; import org.testng.annotations.AfterClass; import org.testng.annotations.BeforeClass; import org.testng.annotations.Test; public class SignUpOnLTTest { /* Local Selenium Grid */ /* WebDriver driver; */ /* Fetch details from https://accounts.lambdatest.com/detail/profile */ public String username = "himanshu.sheth"; public String accesskey = "IreQpTjhvTdZ9aFfouyQePZbOs4EPT3KpkqvUxxAWf4qGK9rvI"; public String gridURL = "@hub.lambdatest.com/wd/hub"; RemoteWebDriver driver = null; @BeforeClass public void testSetUp() throws MalformedURLException { /* Instantiate the Chrome instance */ /* local Selenium Grid */ /* driver = new ChromeDriver(); */ /* Selenium 4 capabilities generated using https://www.lambdatest.com/capabilities-generator/ */ ChromeOptions capabilities = new ChromeOptions(); capabilities.setCapability("browserName", "chrome"); capabilities.setCapability("version", "latest"); capabilities.setCapability("platform", "Windows 10"); capabilities.setCapability("build", "[Java] Page Factory Demo on LambdaTest"); capabilities.setCapability("name", "[Java] Page Factory Demo on LambdaTest"); capabilities.setCapability("geoLocation","IN"); try { driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities); } catch (MalformedURLException e) { System.out.println("Invalid grid URL"); } catch (Exception e) { System.out.println(e.getMessage()); } driver.manage().window().maximize(); driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10)); } @Test public void test_signupOnLambdaTest() throws InterruptedException { HomePage home = new HomePage(driver); home.clickOnStartTestingButton(); SignUpPage signup = new SignUpPage(driver); /* Check if page is opened */ Assert.assertTrue(signup.isLTPageOpen()); /* Create object of CreateAccountPage */ CreateAccountPage accountPage =new CreateAccountPage(driver); /* Fill up data */ accountPage.setName("Page Factory Testing"); accountPage.setEmail("[email protected]"); accountPage.setAccount_password("password123"); accountPage.setPhone_number("911234567891"); accountPage.setDesignation("Manager"); accountPage.setCompanySize("10000+"); /* Click on Accept T&C and Create Account button */ accountPage.clickAcceptTCButton(); /* Wait for a few seconds */ driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5)); /* Check if page is opened */ if (accountPage.isVerifyPageOpen()) { System.out.println("Email address verification page is open\n"); } /* Wait for a few seconds */ driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10)); System.out.println("Page Factory demo complete\n"); } @AfterClass public void tearDown() { System.out.println("Close method of WebDriver Called"); driver.close(); } }

• How To Automate Login Page Using Selenium WebDriver?
  1 project | dev.to | 10 Mar 2022

  import org.openqa.selenium.By; import org.openqa.selenium.WebElement; import org.openqa.selenium.remote.DesiredCapabilities; import org.openqa.selenium.remote.RemoteWebDriver; import org.testng.Assert; import org.testng.annotations.AfterClass; import org.testng.annotations.BeforeClass; import org.testng.annotations.Parameters; import org.testng.annotations.Test; import java.net.MalformedURLException; import java.net.URL; import java.util.concurrent.TimeUnit; public class LoginTest { public String username = "YOUR_USERNAME"; public String accesskey = "YOUR_ACCESSKEY"; public static RemoteWebDriver driver = null; public String gridURL = "@hub.lambdatest.com/wd/hub"; @BeforeClass @Parameters("browser") public void setUp(String browser) throws Exception { DesiredCapabilities capabilities = new DesiredCapabilities(); if (browser.equalsIgnoreCase("Chrome")) { capabilities.setCapability("browserName", "chrome"); capabilities.setCapability("version", "93.0"); capabilities.setCapability("platform", "win10"); // If this cap isn't specified, it will just get the any available one capabilities.setCapability("build", "LoginTest"); capabilities.setCapability("name", "LoginTestInChrome"); } else if (browser.equalsIgnoreCase("Firefox")) { capabilities.setCapability("browserName", "Firefox"); //To specify the browser capabilities.setCapability("version", "76.0"); //To specify the browser version capabilities.setCapability("platform", "win10"); // To specify the OS capabilities.setCapability("build", "LoginTest"); //To identify the test capabilities.setCapability("name", "LoginTestInFirefox"); } try { driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities); } catch (MalformedURLException e) { System.out.println("Invalid grid URL"); } catch (Exception e) { System.out.println(e.getMessage()); } } @Test() public void test_1() { String url = "https://www.lambdatest.com/"; driver.get(url); driver.manage().window().maximize(); driver.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS); WebElement login = driver.findElement(By.linkText("Login")); System.out.println("Clicking on the login element in the main page"); login.click(); driver.manage().timeouts().pageLoadTimeout(10,TimeUnit.SECONDS); WebElement email = driver.findElement(By.id("email")); WebElement password = driver.findElement(By.id("password")); WebElement loginButton = driver.findElement(By.id("login-button")); email.clear(); System.out.println("Entering the email"); email.sendKeys("your_email”); password.clear(); System.out.println("entering the password"); password.sendKeys("your_password"); System.out.println("Clicking login button"); loginButton.click(); String title = "Welcome - LambdaTest"; String actualTitle = driver.getTitle(); System.out.println("Verifying the page title has started"); Assert.assertEquals(actualTitle,title,"Page title doesnt match"); System.out.println("The page title has been successfully verified"); System.out.println("User logged in successfully"); } @AfterClass public void closeBrowser() { driver.close(); } }