NodeJs-Cucumber-Selenium VS vite

/*Selenium Webdriver command to check whether a particular web element is displayed */ driver = new ChromeDriver(); driver.Url = "https://www.lambdatest.com"; /* The Xpath of the Login Button on LambdaTest homepage */ IWebElement web_element = driver.FindElement(By.XPath("//*[@id="navbarSupportedContent"]/ul/li[6]/a")); Boolean element_enabled = web_element.Displayed;

lambdatest.com — Manual, visual, screenshot, and automated browser testing on selenium and cypress, free for Open Source

import asyncio import pytest from pyppeteer.errors import PageError from urllib.parse import quote import json import os import sys from os import environ from pyppeteer import connect, launch # Documentation Link # https://miyakogi.github.io/pyppeteer/reference.html#dialog-class # Interesting reference question # https://stackoverflow.com/questions/75622322/ # why-dialog-popup-alert-doesnt-dismiss-as-they-claim-by-using-pyppeteer-class # Scenario Handling Alerts dialog_test_url = 'https://www.lambdatest.com/selenium-playground/javascript-alert-box-demo' # Locators for different elements # 0 - JS Alert # 1 - Confirm Box # 2 - Prompt Box loc_alert_arr = ['.my-30', '.py-20.ml-10 .btn', 'section:nth-of-type(3) div:nth-of-type(3) .btn'] test_message = 'LambdaTest is a great platform!' # Event event listener for handling JS alert dialog box def handle_js_dialog_box(dialog): asyncio.ensure_future(dialog.accept()) print(f"Dialog message: {dialog.message}") # Event event listener for handling confirm dialog box def handle_confirm_accept_dialog_box(dialog): asyncio.ensure_future(dialog.accept()) print(f"Dialog message: {dialog.message}") # Event event listener for handling confirm dialog box def handle_confirm_dismiss_dialog_box(dialog): asyncio.ensure_future(dialog.dismiss()) print(f"Dialog message: {dialog.message}") # Event event listener for handling prompt dialog box def handle_confirm_prompt_dialog_box(dialog): asyncio.ensure_future(dialog.accept(test_message)) print(f"Dialog message: {dialog.message}") @pytest.mark.asyncio @pytest.mark.order(1) async def test_handling_js_alerts(page): await page.goto(dialog_test_url) # Can be changed with non-blocking sleep await asyncio.sleep(1) page.on('dialog', handle_js_dialog_box) elem_alert = await page.querySelector(loc_alert_arr[0]) # Click on the located element await elem_alert.click() # Wait for the event loop to process events await asyncio.sleep(2) @pytest.mark.asyncio @pytest.mark.order(2) async def test_handling_confirm_accept_alerts(page): await page.goto(dialog_test_url) # Can be changed with non-blocking sleep await asyncio.sleep(1) page.on('dialog', handle_confirm_accept_dialog_box) # Confirm Alert elem_alert = await page.querySelector(loc_alert_arr[1]) # Click on the located element await elem_alert.click() # Wait for the event loop to process events await asyncio.sleep(2) @pytest.mark.asyncio @pytest.mark.order(3) async def test_handling_confirm_dismiss_alerts(page): await page.goto(dialog_test_url) # Can be changed with non-blocking sleep await asyncio.sleep(1) page.on('dialog', handle_confirm_dismiss_dialog_box) await asyncio.sleep(2) # Dismiss Alert elem_alert = await page.querySelector(loc_alert_arr[1]) # Click on the located element await elem_alert.click() # Wait for the event loop to process events await asyncio.sleep(2) @pytest.mark.asyncio @pytest.mark.order(4) async def test_handling_prompt_alerts(page): await page.goto(dialog_test_url) # Can be changed with non-blocking sleep await asyncio.sleep(1) page.on('dialog', handle_confirm_prompt_dialog_box) await asyncio.sleep(1) # Prompt Alert elem_alert = await page.querySelector(loc_alert_arr[2]) # Click on the located element await elem_alert.click() page.on('dialog', handle_confirm_dismiss_dialog_box) await asyncio.sleep(2)

/** * Add the file in your test suite to run tests on LambdaTest. * Import 'test' object from this file in the tests. */ import * as base from "@playwright/test"; import path from "path"; import { chromium } from "@playwright/test" import dotenv from 'dotenv'; dotenv.config(); // LambdaTest capabilities const capabilities = { browserName: "Chrome", // Browsers allowed: 'Chrome', 'MicrosoftEdge', 'pw-chromium', 'pw-firefox' and 'pw-webkit' browserVersion: "latest", "LT:Options": { platform: "Windows 10", build: "Playwright TypeScript iframes", name: "Playwright TypeScript iframes", user: process.env.LT_USERNAME, accessKey: process.env.LT_ACCESS_KEY, network: true, video: true, console: true, tunnel: false, // Add tunnel configuration if testing locally hosted webpage tunnelName: "", // Optional geoLocation: "US", // country code can be fetched from https://www.lambdatest.com/capabilities-generator/ }, }; // Patching the capabilities dynamically according to the project name. const modifyCapabilities = (configName, testName) => { let config = configName.split("@lambdatest")[0]; let [browserName, browserVersion, platform] = config.split(":"); capabilities.browserName = browserName ? browserName : capabilities.browserName; capabilities.browserVersion = browserVersion ? browserVersion : capabilities.browserVersion; capabilities["LT:Options"]["platform"] = platform ? platform : capabilities["LT:Options"]["platform"]; capabilities["LT:Options"]["name"] = testName; }; const getErrorMessage = (obj, keys) => keys.reduce( (obj, key) => (typeof obj == "object" ? obj[key] : undefined), obj ); const test = base.test.extend({ page: async ({ page, playwright }, use, testInfo) => { // Configure LambdaTest platform for cross-browser testing let fileName = testInfo.file.split(path.sep).pop(); if (testInfo.project.name.match(/lambdatest/)) { modifyCapabilities( testInfo.project.name, '${testInfo.title} - ${fileName}' ); const browser = await chromium.connect({ wsEndpoint: 'wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent( JSON.stringify(capabilities) )}', }); const ltPage = await browser.newPage(testInfo.project.use); await use(ltPage); const testStatus = { action: "setTestStatus", arguments: { status: testInfo.status, remark: getErrorMessage(testInfo, ["error", "message"]), }, }; await ltPage.evaluate(() => {}, 'lambdatest_action: ${JSON.stringify(testStatus)}'); await ltPage.close(); // await browser.close(); } else { // Run tests in local in case of local config provided await use(page); } }, }); export default test;

import json import logging import os import subprocess import sys import time import urllib from logging import getLogger from dotenv import load_dotenv from playwright.sync_api import sync_playwright # setup basic logging for our project which will display the time, log level & log message logger = getLogger("webscapper.py") logging.basicConfig( stream=sys.stdout, # uncomment this line to redirect output to console format="%(message)s", level=logging.DEBUG, ) # LambdaTest username & access key are stored in an env file & we fetch it from there using python dotenv module load_dotenv("sample.env") capabilities = { "browserName": "Chrome", # Browsers allowed: `Chrome`, `MicrosoftEdge`, `pw-chromium`, `pw-firefox` and `pw-webkit` "browserVersion": "latest", "LT:Options": { "platform": "Windows 10", "build": "E Commerce Scrape Build", "name": "Scrape Lambda Software Product", "user": os.getenv("LT_USERNAME"), "accessKey": os.getenv("LT_ACCESS_KEY"), "network": False, "video": True, "console": True, "tunnel": False, # Add tunnel configuration if testing locally hosted webpage "tunnelName": "", # Optional "geoLocation": "", # country code can be fetched from https://www.lambdatest.com/capabilities-generator/ }, } def main(): with sync_playwright() as playwright: playwright_version = ( str(subprocess.getoutput("playwright --version")).strip().split(" ")[1] ) capabilities["LT:Options"]["playwrightClientVersion"] = playwright_version lt_cdp_url = ( "wss://cdp.lambdatest.com/playwright?capabilities=" + urllib.parse.quote(json.dumps(capabilities)) ) logger.info(f"Initiating connection to cloud playwright grid") browser = playwright.chromium.connect(lt_cdp_url) # comment above line & uncomment below line to test on local grid # browser = playwright.chromium.launch(headless=False) page = browser.new_page() try: # section to navigate to software category page.goto("https://ecommerce-playground.lambdatest.io/") page.get_by_role("button", name="Shop by Category").click() page.get_by_role("link", name="Software").click() page_to_be_scrapped = page.get_by_role( "combobox", name="Show:" ).select_option( "https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=17&limit=75" ) page.goto(page_to_be_scrapped[0]) # Since image are lazy-loaded scroll to bottom of page # the range is dynamically decided based on the number of items i.e. we take the range from limit # https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=17&limit=75 for i in range(int(page_to_be_scrapped[0].split("=")[-1])): page.mouse.wheel(0, 300) i += 1 time.sleep(0.1) # Construct locators to identify name, price & image base_product_row_locator = page.locator("#entry_212408").locator(".row").locator(".product-grid") product_name = base_product_row_locator.get_by_role("heading") product_price = base_product_row_locator.locator(".price-new") product_image = ( base_product_row_locator.locator(".carousel-inner") .locator(".active") .get_by_role("img") ) total_products = base_product_row_locator.count() for product in range(total_products): logger.info( f"\n**** PRODUCT {product+1} ****\n" f"Product Name = {product_name.nth(product).all_inner_texts()[0]}\n" f"Price = {product_price.nth(product).all_inner_texts()[0]}\n" f"Image = {product_image.nth(product).get_attribute('src')}\n" ) status = 'status' remark = 'Scraping Completed' page.evaluate("_ => {}","lambdatest_action: {\"action\": \"setTestStatus\", \"arguments\": {\"status\":\"" + status + "\", \"remark\": \"" + remark + "\"}}") except Exception as ex: logger.error(str(ex)) if __name__ == "__main__": main()

public class SeleniumPlaygroundTests extends BaseTest { @Test public void testMenus() { this.driverManager.getDriver().get("https://www.lambdatest.com/selenium-playground/"); final var mainPage = new MainPage(this.driverManager.getDriver()); assertEquals(mainPage.menuListSize(), 37); }

Tired of manually creating JSON data? Generate random JSON data in seconds with our easy-to-use tool. Try it now and make your development process a breeze: https://www.lambdatest.com/free-online-tools/random-json-generator

To see, how it works step by step refer to our tutorial on using LambdaTest’s WordPress Plugin for cross browser testing.

import java.util.Arrays; import java.util.List; import java.net.MalformedURLException; import java.net.URL; import org.openqa.selenium.remote.DesiredCapabilities; import org.openqa.selenium.remote.RemoteWebDriver; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.edge.EdgeDriver; import org.openqa.selenium.firefox.FirefoxDriver; public class DriverManager { private RemoteWebDriver driver; public static void init_driver(String browser) throws MalformedURLException { String username = System.getenv("LT_USERNAME") == null ? "Your LT Username" : System.getenv("LT_USERNAME"); String authkey = System.getenv("LT_ACCESS_KEY") == null ? "Your LT AccessKey" : System.getenv("LT_ACCESS_KEY"); // Create a list of browsers List browsers = Arrays.asList("chrome", "firefox", "edge"); // Loop through the list of browsers and create a driver instance for each one for (String browserName : browsers) { if (browser.equalsIgnoreCase("chrome")) { //To launch the chrome browser on local /*driver = new ChromeDriver();*/ //Setting chrome capabilities DesiredCapabilities ChromeCaps = new DesiredCapabilities(); ChromeCaps.setCapability("platform", "Windows 10"); ChromeCaps.setCapability("browserName", "chrome"); ChromeCaps.setCapability("version", "latest"); ChromeCaps.setCapability("build", "TestNG With Java"); ChromeCaps.setCapability("name", m.getName() + this.getClass().getName()); ChromeCaps.setCapability("plugin", "git-testng"); //To launch the chrome browser on LambdaTest cloud grid String[] Tags = new String[]{"Feature", "Magicleap", "Severe"}; ChromeCaps.setCapability("tags", Tags); driver = new RemoteWebDriver(new URL("https://" + username + ":" + authkey + hub), ChromeCaps); } else if (browser.equalsIgnoreCase("firefox")) { //To launch the firefox browser on local /*driver = new FirefoxDriver();*/ //Setting firefox capabilities DesiredCapabilities FirefoxCaps = new DesiredCapabilities(); FirefoxCaps.setCapability("platform", "Windows 10"); FirefoxCaps.setCapability("browserName", "firefox"); FirefoxCaps.setCapability("version", "114.0"); FirefoxCaps.setCapability("build", "TestNG With Java"); FirefoxCaps.setCapability("name", m.getName() + this.getClass().getName()); FirefoxCaps.setCapability("plugin", "git-testng"); //To launch the firefox browser on LambdaTest cloud grid String[] Tags = new String[]{"Feature", "Magicleap", "Severe"}; FirefoxCaps.setCapability("tags", Tags); driver = new RemoteWebDriver(new URL("https://" + username + ":" + authkey + hub), FirefoxCaps); } else if (browser.equalsIgnoreCase("edge")) { //To launch the edge browser on local /*driver = new EdgeDriver();*/ //Setting edge capabilities DesiredCapabilities EdgeCaps = new DesiredCapabilities(); EdgeCaps.setCapability("platform", "Windows 10"); EdgeCaps.setCapability("browserName", "edge"); EdgeCaps.setCapability("version", "112.0"); EdgeCaps.setCapability("build", "TestNG With Java"); EdgeCaps.setCapability("name", m.getName() + this.getClass().getName()); EdgeCaps.setCapability("plugin", "git-testng"); //To launch the edge browser on LambdaTest cloud grid String[] Tags = new String[]{"Feature", "Magicleap", "Severe"}; EdgeCaps.setCapability("tags", Tags); driver = new RemoteWebDriver(new URL("https://" + username + ":" + authkey + hub), EdgeCaps); } else { throw new IllegalArgumentException("Invalid browser name: " + browser); } // Use the driver instance to navigate to a webpage and perform some actions driver.get("https://www.lambdatest.com"); System.out.println(driver.getTitle()); // Close the driver instance driver.quit(); } } }

from selenium import webdriver from selenium.webdriver.edge.service import Service # Driver Code if __name__ == '__main__': # create service object edgeService = Service( r"D:\\Lambdatest Tools\\edgedriver_win64\\msedgedriver.exe") # create webdriver object edgeDriver = webdriver.Edge(service=edgeService) # open browser and navigate to the website edgeDriver.get('https://www.lambdatest.com')

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { port: 3000 }, css: { devSourcemap: true }, resolve: { alias: { '~': path.resolve(__dirname, './src') } } })

I am currently utilizing Vite:

Homepage: https://vitejs.dev/

Without any adding any dependencies you can connect react props to raw css at runtime with nothing but css variables (aka "custom properties"). If you add CSS modules on top you don't have to worry about affecting the global scope so components created in this way can be truly modular and transferrable. I use this with vite.

Little confused as to why it has vite in it‘s name, it seems unrelated to https://vitejs.dev/

it says in their docs that they recommend Vite https://vitejs.dev/

it goes like this.

1. you create a repo folder, you cd into it.

2. you create a client template using vite which can be plain typescript, or uses frameworks such as react or vue, at https://vitejs.dev/guide/

3. you cd in that client directory, you npm install, then you npm run dev, it should show you that it works at localhost:5173

4. you follow the instructions on your url, you do npm install @web3modal/wagmi @wagmi/core @wagmi/connectors viem

5. you follow the further instructions.

> It seems like this is for npm or yarn to pull from a remote repository maintained by @wagmi for instance. But then what?

you install the wagmi modules, then you import them in your js code, those code can run upon being loaded or upon user actions such as button clicks

> Do I just symlink to the node_modules directory somehow? Use browserify? Or these days I'd use webpack or whatever the cool kids are using these days?

no need for those. browserify is old school way of transpiling commonjs modules into browser-compatible modules. webpack is similar. vite replaces both webpack and browserify. vite also uses esbuild and swc under the hood which replaces babel.

> I totally get how node package management works ... for NODE. But all these client-side JS projects these days have docs that are clearly for the client-side but the ES2015 module examples they show seem to leave out all instructions for how to actually get the files there, as if it's obvious.

pretty much similar actually. except on client-side, you have src and dist folders. when you run "npm run build" vite will compile the src dir into dist dir. the outputs are the static files that you can serve with any http server such as npx serve, or caddy, or anything really.

> What gives? And finally, what exactly does "browserify" do these days, since I think Node supports both ES modules and and CJS modules? I also see sometimes UMD universal modules

vite supports both ecmascript modules and commonjs modules. but these days you'll just want to stick with ecmascript which makes your code consistently use import and export syntax, and you get the extra benefit of it working well with your vscode intellisense.

> In short, I'm a bit confused how to use package management properly with browsers in 2024: https://modern-web.dev/guides/going-buildless/es-modules/

if people want plain js there is unpkg.com and esm.sh way, but the vite route is the best for you as it's recommended and tested by the providers of your modules.

> And finally, if you answer this, can you spare a word about typescript? Do we still need to use Babel and Webpack together to transpile it to JS, and minify and tree-shake, or what?

I recommend typescript, as it gives you better type-safety and better intellisense, but it really depends. If you're new to it, it can slow you down at first. But as your project grows you'll eventually see the value of it. In vite there are options to scaffold your project in pure js or ts.

First you have to know that all those react projects are created using Vite, and for each of them, you need change the vite.config.ts file by adding the following configuration:

CSSHooks works with React, Prereact, Solid.js, and Qwik, and we’re going to use Vite with the React configuration. First, let's create a project called css-hooks and install Vite:

JavaScript React Flowbite Tailwind Firebase - Auth, Database, and Hosting Vite

For this full-stack single-page app, you'll use Vite.js as your frontend build tool and the react-beautiful-dnd package for draggable items.