Best JavaScript code snippet using storybook-root
class.spec.ts
Source:class.spec.ts
1import { expect } from 'chai'2import { describe, it } from 'mocha'3import { waitFor } from '@testing-library/dom'4import userEvent from '@testing-library/user-event'5import { CreateGlobal, BootstrapAndAttach } from '@benbraide/inlinejs';6import { DataDirectiveHandlerCompact } from '../directive/data/data';7import { ClassDirectiveHandlerCompact } from '../directive/attr/class';8import { OnDirectiveHandlerCompact } from '../directive/flow/on';9describe('x-class directive', () => {10 it('should remove class when attribute value is falsy', () => {11 document.body.innerHTML = `12 <div x-data="{ foo: false }">13 <span class="foo" x-class:foo="foo"></span>14 </div>15 `;16 17 CreateGlobal();18 DataDirectiveHandlerCompact();19 ClassDirectiveHandlerCompact();20 BootstrapAndAttach();21 22 expect(document.querySelector('span')!.classList.contains('foo')).equal(false);23 });24 it('should add class when attribute value is truthy', () => {25 document.body.innerHTML = `26 <div x-data="{ foo: true }">27 <span x-class:foo="foo"></span>28 </div>29 `;30 31 CreateGlobal();32 DataDirectiveHandlerCompact();33 ClassDirectiveHandlerCompact();34 BootstrapAndAttach();35 36 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);37 });38 it('should be reactive', async () => {39 document.body.innerHTML = `40 <div x-data="{ foo: true }">41 <span x-class:foo="foo"></span>42 <button x-on:click="foo = false"></button>43 </div>44 `;45 46 CreateGlobal();47 DataDirectiveHandlerCompact();48 ClassDirectiveHandlerCompact();49 OnDirectiveHandlerCompact();50 BootstrapAndAttach();51 52 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);53 54 userEvent.click(document.querySelector('button')!);55 await waitFor(() => { expect(document.querySelector('span')!.classList.contains('foo')).equal(false) });56 });57 it('should accept a key-value map', () => {58 document.body.innerHTML = `59 <div x-data="{ map: { foo: true, zoo: false } }">60 <span x-class="map"></span>61 </div>62 `;63 64 CreateGlobal();65 DataDirectiveHandlerCompact();66 ClassDirectiveHandlerCompact();67 BootstrapAndAttach();68 69 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);70 expect(document.querySelector('span')!.classList.contains('zoo')).equal(false);71 });72 it('should have reactive key-value map', async () => {73 document.body.innerHTML = `74 <div x-data="{ map: { foo: true, zoo: false } }">75 <span x-class="map"></span>76 <button x-on:click="map.foo = !(map.zoo = true)"></button>77 </div>78 `;79 80 CreateGlobal();81 DataDirectiveHandlerCompact();82 ClassDirectiveHandlerCompact();83 OnDirectiveHandlerCompact();84 BootstrapAndAttach();85 86 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);87 expect(document.querySelector('span')!.classList.contains('zoo')).equal(false);88 userEvent.click(document.querySelector('button')!);89 await waitFor(() => { expect(document.querySelector('span')!.classList.contains('foo')).equal(false) });90 await waitFor(() => { expect(document.querySelector('span')!.classList.contains('zoo')).equal(true) });91 });92 it('should accept the short form and be reactive', async () => {93 document.body.innerHTML = `94 <div x-data="{ foo: true }">95 <span .foo="foo"></span>96 <button x-on:click="foo = false"></button>97 </div>98 `;99 100 CreateGlobal();101 DataDirectiveHandlerCompact();102 ClassDirectiveHandlerCompact();103 OnDirectiveHandlerCompact();104 BootstrapAndAttach();105 106 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);107 108 userEvent.click(document.querySelector('button')!);109 await waitFor(() => { expect(document.querySelector('span')!.classList.contains('foo')).equal(false) });110 });111 it('should be merged by string syntax', async () => {112 document.body.innerHTML = `113 <div x-data="{ isOn: false }">114 <span class="foo" x-class="isOn ? 'bar': ''"></span>115 <button x-on:click="isOn = ! isOn"></button>116 </div>117 `;118 119 CreateGlobal();120 DataDirectiveHandlerCompact();121 ClassDirectiveHandlerCompact();122 OnDirectiveHandlerCompact();123 BootstrapAndAttach();124 125 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);126 expect(document.querySelector('span')!.classList.contains('bar')).equal(false);127 128 userEvent.click(document.querySelector('button')!);129 130 await waitFor(() => {131 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);132 expect(document.querySelector('span')!.classList.contains('bar')).equal(true);133 });134 135 document.querySelector('button')!.click();136 137 await waitFor(() => {138 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);139 expect(document.querySelector('span')!.classList.contains('bar')).equal(false);140 });141 });142 it('should be merged by array syntax', async () => {143 document.body.innerHTML = `144 <div x-data="{ isOn: false }">145 <span class="foo" x-class="isOn ? ['bar', 'baz'] : ['bar']"></span>146 <button x-on:click="isOn = ! isOn"></button>147 </div>148 `;149 150 CreateGlobal();151 DataDirectiveHandlerCompact();152 ClassDirectiveHandlerCompact();153 OnDirectiveHandlerCompact();154 BootstrapAndAttach();155 156 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);157 expect(document.querySelector('span')!.classList.contains('bar')).equal(true);158 expect(document.querySelector('span')!.classList.contains('baz')).equal(false);159 160 document.querySelector('button')!.click();161 162 await waitFor(() => {163 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);164 expect(document.querySelector('span')!.classList.contains('bar')).equal(true);165 expect(document.querySelector('span')!.classList.contains('baz')).equal(true);166 });167 168 document.querySelector('button')!.click();169 170 await waitFor(() => {171 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);172 expect(document.querySelector('span')!.classList.contains('bar')).equal(true);173 expect(document.querySelector('span')!.classList.contains('baz')).equal(false);174 });175 });176 it('should remove multiple classes by object syntax', () => {177 document.body.innerHTML = `178 <div x-data="{ isOn: false }">179 <span class="foo bar" x-class="{ 'foo bar': isOn }"></span>180 </div>181 `;182 183 CreateGlobal();184 DataDirectiveHandlerCompact();185 ClassDirectiveHandlerCompact();186 BootstrapAndAttach();187 188 expect(document.querySelector('span')!.classList.contains('foo')).equal(false);189 expect(document.querySelector('span')!.classList.contains('bar')).equal(false);190 });191 it('should add multiple classes by object syntax', () => {192 document.body.innerHTML = `193 <div x-data="{ isOn: true }">194 <span x-class="{ 'foo bar': isOn }"></span>195 </div>196 `;197 198 CreateGlobal();199 DataDirectiveHandlerCompact();200 ClassDirectiveHandlerCompact();201 BootstrapAndAttach();202 203 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);204 expect(document.querySelector('span')!.classList.contains('bar')).equal(true);205 });206 it('should be added by array syntax', () => {207 document.body.innerHTML = `208 <div x-data>209 <span class="" x-class="['foo', 'bar']"></span>210 </div>211 `;212 213 CreateGlobal();214 DataDirectiveHandlerCompact();215 ClassDirectiveHandlerCompact();216 BootstrapAndAttach();217 218 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);219 expect(document.querySelector('span')!.classList.contains('bar')).equal(true);220 });221 it('should be synced by string syntax', () => {222 document.body.innerHTML = `223 <div x-data="{foo: 'bar baz'}">224 <span class="" x-class="foo"></span>225 </div>226 `;227 228 CreateGlobal();229 DataDirectiveHandlerCompact();230 ClassDirectiveHandlerCompact();231 BootstrapAndAttach();232 233 expect(document.querySelector('span')!.classList.contains('bar')).equal(true);234 expect(document.querySelector('span')!.classList.contains('baz')).equal(true);235 });236 it('should ignore extra whitespace in object syntax', async () => {237 document.body.innerHTML = `238 <div x-data>239 <span x-class="{ ' foo bar ': true }"></span>240 </div>241 `;242 CreateGlobal();243 DataDirectiveHandlerCompact();244 ClassDirectiveHandlerCompact();245 BootstrapAndAttach();246 247 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);248 expect(document.querySelector('span')!.classList.contains('bar')).equal(true);249 });250 251 it('should ignore extra whitespace in string syntax', () => {252 document.body.innerHTML = `253 <div x-data>254 <span x-class="' foo bar '"></span>255 </div>256 `;257 CreateGlobal();258 DataDirectiveHandlerCompact();259 ClassDirectiveHandlerCompact();260 BootstrapAndAttach();261 262 expect(document.querySelector('span')!.classList.contains('foo')).equal(true);263 expect(document.querySelector('span')!.classList.contains('bar')).equal(true);264 });...
directives.spec.ts
Source:directives.spec.ts
1import { expect } from 'chai'2import { describe, it } from 'mocha'3import { CreateGlobal } from '../global/create';4import { CreateDirective } from '../directive/create';5import { BindDirectiveExpansionRule } from '../expansion/bind';6import { ClassDirectiveExpansionRule } from '../expansion/class';7import { OnDirectiveExpansionRule } from '../expansion/on';8describe('directives parser', () => {9 it('should parse a well-formed directive', () => {10 CreateGlobal();11 12 let { meta, value } = (CreateDirective('x-text', '\'Hello world\'') || {});13 expect(meta?.name.value).equal('text');14 expect(value).equal('\'Hello world\'');15 ({ meta, value } = (CreateDirective('data-x-text', '\'Hello world\'') || {}));16 expect(meta?.name.value).equal('text');17 expect(value).equal('\'Hello world\'');18 });19 it('should not parse a malformed directive', () => {20 CreateGlobal();21 22 expect(CreateDirective('z-text', '\'Hello world\'')).equal(null);23 expect(CreateDirective('data-z-text', '\'Hello world\'')).equal(null);24 });25 it('should parse a directive with a specified argument key', () => {26 CreateGlobal();27 28 let { meta, value } = (CreateDirective('x-text:key', '\'Hello world\'') || {});29 expect(meta?.name.value).equal('text');30 expect(meta?.arg.key).equal('key');31 expect(value).equal('\'Hello world\'');32 });33 it('should parse a directive with specified argument options', () => {34 CreateGlobal();35 36 let { meta, value } = (CreateDirective('x-text.first.second', '\'Hello world\'') || {});37 expect(meta?.name.value).equal('text');38 expect(meta?.arg.options.join(',')).equal('first,second');39 expect(value).equal('\'Hello world\'');40 });41 it('should parse a directive with specified argument key and options', () => {42 CreateGlobal();43 44 let { meta, value } = (CreateDirective('x-text:key.first.second', '\'Hello world\'') || {});45 expect(meta?.name.value).equal('text');46 expect(meta?.arg.key).equal('key');47 expect(meta?.arg.options.join(',')).equal('first,second');48 expect(value).equal('\'Hello world\'');49 });50 it('should expand shorthands', () => {51 let global = CreateGlobal();52 global.GetDirectiveManager().AddExpansionRule(BindDirectiveExpansionRule);53 global.GetDirectiveManager().AddExpansionRule(ClassDirectiveExpansionRule);54 global.GetDirectiveManager().AddExpansionRule(OnDirectiveExpansionRule);55 56 let { meta, value } = (CreateDirective(':prop', 'value') || {});57 expect(meta?.name.value).equal('bind');58 expect(meta?.arg.key).equal('prop');59 expect(value).equal('value');60 ({ meta, value } = (CreateDirective('.name', 'value') || {}));61 expect(meta?.name.value).equal('class');62 expect(meta?.arg.key).equal('name');63 expect(value).equal('value');64 ({ meta, value } = (CreateDirective('@event', 'value') || {}));65 expect(meta?.name.value).equal('on');66 expect(meta?.arg.key).equal('event');67 expect(value).equal('value');68 });...
config.spec.ts
Source:config.spec.ts
1import { expect } from 'chai'2import { describe, it } from 'mocha'3import { CreateGlobal } from '../global/create';4describe('config', () => {5 it('should match well-formed directives', () => {6 let config = CreateGlobal().GetConfig();7 expect(config.GetDirectiveRegex().test('x-text')).equal(true);8 expect(config.GetDirectiveRegex().test('data-x-text')).equal(true);9 });10 it('should not match malformed directives', () => {11 let config = CreateGlobal().GetConfig();12 expect(config.GetDirectiveRegex().test('data-z-text')).equal(false);13 expect(config.GetDirectiveRegex().test('z-text')).equal(false);14 expect(config.GetDirectiveRegex().test('text')).equal(false);15 });16 it('should return well-formed directives from specified names', () => {17 let config = CreateGlobal().GetConfig();18 expect(config.GetDirectiveName('text')).equal('x-text');19 expect(config.GetDirectiveName('text', true)).equal('data-x-text');20 });21 it('should match well-formed directives with a changed directive prefix', () => {22 let config = CreateGlobal({ directivePrefix: 'z' }).GetConfig();23 expect(config.GetDirectiveRegex().test('z-text')).equal(true);24 expect(config.GetDirectiveRegex().test('data-z-text')).equal(true);25 });26 it('should not match malformed directives with a changed directive prefix', () => {27 let config = CreateGlobal({ directivePrefix: 'z' }).GetConfig();28 expect(config.GetDirectiveRegex().test('data-x-text')).equal(false);29 expect(config.GetDirectiveRegex().test('x-text')).equal(false);30 expect(config.GetDirectiveRegex().test('text')).equal(false);31 });32 it('should return well-formed directives from specified names with a changed directive prefix', () => {33 let config = CreateGlobal({ directivePrefix: 'z' }).GetConfig();34 expect(config.GetDirectiveName('text')).equal('z-text');35 expect(config.GetDirectiveName('text', true)).equal('data-z-text');36 });...
Using AI Code Generation
1import { createGlobal } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { withInfo } from '@storybook/addon-info';4import { withKnobs, text } from '@storybook/addon-knobs';5storiesOf('Button', module)6 .addDecorator(withKnobs)7 .addDecorator(withInfo)8 .add('with text', () => {9 const label = text('Label', 'Hello Storybook');10 return createGlobal(11 <button>{label}</button>12 );13 });14import { createGlobal } from 'storybook-root-decorator';15import { storiesOf } from '@storybook/react';16import { withInfo } from '@storybook/addon-info';17import { withKnobs, text } from '@storybook/addon-knobs';18storiesOf('Button', module)19 .addDecorator(withKnobs)20 .addDecorator(withInfo)21 .add('with text', () => {22 const label = text('Label', 'Hello Storybook');23 return createGlobal(24 <button>{label}</button>25 body {26 background: #000;27 }28 );29 });30import { createGlobal } from 'storybook-root-decorator';31import { storiesOf } from '@storybook/react';32import { withInfo } from '@storybook/addon-info';33import { withKnobs, text } from '@storybook/addon-knobs';34storiesOf('Button', module)35 .addDecorator(withKnobs)36 .addDecorator(withInfo)37 .add('with text', () => {38 const label = text('Label', 'Hello Storybook');39 return createGlobal(
Using AI Code Generation
1import { createGlobal } from 'storybook-root-decorator';2import { withKnobs } from '@storybook/addon-knobs';3import { addDecorator } from '@storybook/react';4import { withInfo } from '@storybook/addon-info';5import { withA11y } from '@storybook/addon-a11y';6addDecorator(7 createGlobal(8);9import { addDecorator } from '@storybook/react';10import { withKnobs } from '@storybook/addon-knobs';11import { withInfo } from '@storybook/addon-info';12import { withA11y } from '@storybook/addon-a11y';13addDecorator(14);
Using AI Code Generation
1import { createGlobal } from 'storybook-root-decorator';2 body {3 background-color: red;4 }5`;6export default GlobalStyle;7import { addDecorator } from '@storybook/react';8import GlobalStyle from '../test';9addDecorator(GlobalStyle);10import { addDecorator } from '@storybook/react';11import GlobalStyle from '../test';12addDecorator(GlobalStyle);13import { addons } from '@storybook/addons';14import GlobalStyle from '../test';15addons.setConfig({16 sidebar: {17 },18});19import { addDecorator } from '@storybook/react';20import GlobalStyle from '../test';21addDecorator(GlobalStyle);22import { addDecorator } from '@storybook/react';23import GlobalStyle from '../test';24addDecorator(GlobalStyle);25import { addDecorator } from '@storybook/react';26import GlobalStyle from '../test';27addDecorator(GlobalStyle);28import { addDecorator } from '@storybook/react';29import GlobalStyle from '../test';30addDecorator(GlobalStyle);31import { addDecorator } from '@storybook/react';32import GlobalStyle from '../test';33addDecorator(GlobalStyle);34import { addDecorator } from '@storybook/react';35import GlobalStyle from
Using AI Code Generation
1import { createGlobal } from 'storybook-root-decorator';2 body {3 background: red;4 }5`;6export default GlobalStyle;7import GlobalStyle from './test.js';8export const decorators = [GlobalStyle];9import GlobalStyle from './test.js';10export default {11};12export const primary = () => <Button>Primary</Button>;13import GlobalStyle from './test.js';14export default {15};16export const primary = () => <Button>Primary</Button>;17import GlobalStyle from './test.js';18export default {19};20export const primary = () => <Button>Primary</Button>;21import GlobalStyle from './test.js';22export default {23};24export const primary = () => <Button>Primary</Button>;25import GlobalStyle from './test.js';26export default {27};28export const primary = () => <Button>Primary</Button>;
Using AI Code Generation
1import { createGlobal } from 'storybook-root'2createGlobal({})3import { createGlobal } from 'storybook-root'4createGlobal({})5import { createGlobal } from 'storybook-root'6createGlobal({})7import { createGlobal } from 'storybook-root'8createGlobal({})9import { createGlobal } from 'storybook-root'10createGlobal({})11import { createGlobal } from 'storybook-root'12createGlobal({})13import { createGlobal } from 'storybook-root'14createGlobal({})15import { createGlobal } from 'storybook-root'16createGlobal({})17import { createGlobal } from 'storybook-root'18createGlobal({})19import { createGlobal } from 'storybook-root'20createGlobal({})21import { createGlobal } from 'storybook-root'22createGlobal({})23import { createGlobal
Using AI Code Generation
1import { createGlobal } from 'storybook-root-decorator'2import { GlobalStyles } from './globalStyles'3import { addDecorator } from '@storybook/react'4import { GlobalStyles } from './globalStyles'5 createGlobal(<GlobalStyles />)6addDecorator(createGlobal(<GlobalStyles />))7import { createGlobalStyle } from 'styled-components'8 body {9 margin: 0;10 padding: 0;11 }12import { createGlobal } from 'storybook-root-decorator'13import { GlobalStyles } from '../globalStyles'14 createGlobal(<GlobalStyles />)15import { createGlobal } from 'storybook-root-decorator'16import { GlobalStyles } from '../globalStyles'17 createGlobal(<GlobalStyles />)18import { createGlobal } from 'storybook-root-decorator'19import { GlobalStyles } from '../globalStyles'20 createGlobal(<GlobalStyles />)21import { createGlobal } from 'storybook-root-decorator'22import { GlobalStyles } from '../globalStyles'23 createGlobal(<GlobalStyles />)24import { createGlobal } from 'storybook-root-decorator'25import { GlobalStyles } from '../globalStyles'26 createGlobal(<GlobalStyles />)27import { createGlobal } from 'storybook-root-decorator'28import { GlobalStyles } from '../globalStyles'29 createGlobal(<GlobalStyles />)30import { createGlobal } from 'storybook-root-decorator'31import { GlobalStyles } from '../globalStyles'32 createGlobal(<GlobalStyles />)33import { createGlobal } from 'storybook-root-decorator'34import { GlobalStyles } from '../globalStyles'35 createGlobal(<GlobalStyles />)36import {
Using AI Code Generation
1import { createGlobal } from 'storybook-root-decorator';2import { addDecorator } from '@storybook/react';3addDecorator(4 createGlobal(5 body {6 background-color: #fff;7 margin: 0;8 padding: 0;9 font-family: 'Roboto', sans-serif;10 }11);12addDecorator(13 createGlobal(14 body {15 background-color: #fff;16 margin: 0;17 padding: 0;18 font-family: 'Roboto', sans-serif;19 }20);21addDecorator(22 createGlobal(23 body {24 background-color: #fff;25 margin: 0;26 padding: 0;27 font-family: 'Roboto', sans-serif;28 }29);30addDecorator(31 createGlobal(32 body {33 background-color: #fff;34 margin: 0;35 padding: 0;36 font-family: 'Roboto', sans-serif;37 }38);39addDecorator(40 createGlobal(41 body {42 background-color: #fff;43 margin: 0;44 padding: 0;45 font-family: 'Roboto', sans-serif;46 }47);48addDecorator(49 createGlobal(50 body {51 background-color: #fff;52 margin: 0;53 padding: 0;54 font-family: 'Roboto', sans-serif;55 }56);57addDecorator(58 createGlobal(59 body {60 background-color: #fff;61 margin: 0;62 padding: 0;63 font-family: 'Roboto', sans-serif;64 }65);66addDecorator(67 createGlobal(68 body {69 background-color: #fff;70 margin: 0;71 padding: 0;72 font-family: 'Roboto', sans-serif;73 }74);75addDecorator(76 createGlobal(77 body {78 background-color: #fff;79 margin: 0;80 padding: 0;81 font-family: 'Roboto', sans-serif;82 }
Using AI Code Generation
1import createGlobal from 'storybook-root-decorator';2import { addDecorator } from '@storybook/react';3addDecorator(createGlobal({ 'body': { 'background-color': '#f5f5f5' } }));4import createGlobal from 'storybook-root-decorator';5import { addDecorator } from '@storybook/react';6addDecorator(createGlobal({ 'body': { 'background-color': '#f5f5f5' } }));7import createGlobal from 'storybook-root-decorator';8import { addDecorator } from '@storybook/react';9addDecorator(createGlobal({ 'body': { 'background-color': '#f5f5f5' } }));10import createGlobal from 'storybook-root-decorator';11import { addDecorator } from '@storybook/react';12addDecorator(createGlobal({ 'body': { 'background-color': '#f5f5f5' } }));13import createGlobal from 'storybook-root-decorator';14import { addDecorator } from '@storybook/react';15addDecorator(createGlobal({ 'body': { 'background-color': '#f5f5f5' } }));16import createGlobal from 'storybook-root-decorator';17import { addDecorator } from '@storybook/react';18addDecorator(createGlobal({ 'body': { 'background-color': '#f5f5f5' } }));19import createGlobal from 'storybook-root-decorator';20import { addDecorator } from '@storybook/react';21addDecorator(createGlobal({ 'body': { 'background-color': '#f5f5f5' } }));22import createGlobal from 'storybook-root-decorator';23import { addDecorator } from '@storybook/react';24addDecorator(createGlobal({ 'body': { 'background-color': '#f5f5f5' } }));
Using AI Code Generation
1import { createGlobal } from 'storybook-root-scope';2createGlobal({3});4import { createGlobal } from 'storybook-root-scope';5createGlobal({6});7import { createGlobal } from 'storybook-root-scope';8createGlobal({9});10import { createGlobal } from 'storybook-root-scope';11createGlobal({12});13import { createGlobal } from 'storybook-root-scope';14createGlobal({15});16import { createGlobal } from 'storybook-root-scope';17createGlobal({18});19import { createGlobal } from 'storybook-root-scope';20createGlobal({21});22import { createGlobal } from 'storybook-root-scope';23createGlobal({24});25import { createGlobal } from 'storybook-root-scope';26createGlobal({27});28import { createGlobal } from 'storybook-root-scope';29createGlobal({30});31import { createGlobal } from 'storybook-root-scope';32createGlobal({33});34import { createGlobal } from 'storybook-root-scope';35createGlobal({36});
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!