How to use createGlobal method in storybook-root

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});

Automation Testing Tutorials

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.