Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use FindBy method in storybook-test-runner

Best JavaScript code snippet using storybook-test-runner

browser.ts

Source:browser.ts

1import 'chromedriver';2import { Builder, By, ThenableWebDriver, until, WebElementPromise } from "selenium-webdriver";3import { Options }                                                           from "selenium-webdriver/chrome";4import { Condition, HTMLQuery, Identifier, IdentifierError } from "./utils";5export class Browser6{7    private readonly driver: ThenableWebDriver;8    public constructor(private isPrivate: boolean = false, private isHeadless: boolean = true) {9        this.driver = this.initDriver().build();10    }11    public getDriver(): ThenableWebDriver12    {13        return this.driver;14    }15    private initDriver(): Builder {16        let chromeCapabilities: Options = new Options();17        if(this.isPrivate) {18            chromeCapabilities.addArguments('--incognito');19        }20        if(this.isHeadless) {21            chromeCapabilities.headless();22        }23        chromeCapabilities.setAcceptInsecureCerts(true);24        return new Builder().forBrowser('chrome').setChromeOptions(chromeCapabilities);25    }26    public async navigate(url: string) {27        try{28            await this.driver.get(url);29        } catch(e) {30            console.log("Cannot navigate.");31        }32    }33    public Identify(selector: string): WebElementPromise {34        if(selector.charAt(0) === '#')35        {36            return this.driver.wait(until.elementLocated(By.id(selector.split("#")[1])));37        } else if(selector.charAt(0) === ".")38        {39            return this.driver.wait(until.elementLocated(By.className(selector.split('.')[1])));40        }else41        {42            return this.driver.wait(until.elementLocated(By.name(selector)));43        }44    }45    public findBy(selector: Identifier): WebElementPromise {46        if(!selector.HTMLQuery)47        {48            throw new IdentifierError("HTMLQuery undefined")49        }50        if(selector.HTMLQuery instanceof Array || selector.elementIdentifier instanceof Array)51        {52            throw new IdentifierError("HTML Query or Element Identifier are of type string Array. Not Valid.")53        }54        return this.driver.findElement(new By(selector.HTMLQuery, selector.elementIdentifier));55    }56    public findElementById(idSelector: string): WebElementPromise {57        return this.driver.findElement(By.id(idSelector));58    }59    public findElementByCSS(cssSelector: string): WebElementPromise {60        return this.driver.findElement(By.css(cssSelector));61    }62    public async clearCookies(url?: string): Promise<void> {63        if(url) {64            const currentUrl = await this.driver.getCurrentUrl();65            await this.navigate(url);66            await this.driver.manage().deleteAllCookies();67            await this.navigate(currentUrl);68        } else {69            await this.driver.manage().deleteAllCookies();70        }71    }72    public async waitUntil(waitUntil: Identifier): Promise<boolean | void> {73        switch(waitUntil.condition) {74        case Condition.ElementIsVisible:75            return await this.waitUntilElementIsVisible(waitUntil);76        case Condition.ElementIsPresent:77            return await this.waitUntilElementIsPresent(waitUntil);78        case Condition.PageHasLoaded:79            return await this.waitUntilPageHasLoaded(waitUntil);80        }81    }82    /**83     * Waits until Page has loaded by matching URL.84     * @param findBy85     * findBy.condition has to be Conditions.PageHasLoaded86     * findBy.elementIdentifier has to be string "{URL}"87     * @private88     */89    private async waitUntilPageHasLoaded(findBy: Identifier): Promise<boolean>90    {91        if(findBy.elementIdentifier instanceof Array)92        {93            throw new IdentifierError("elementIdentifer needs to be of type string, not string[]")94        }95        try{96            this.driver.wait(until.urlContains(findBy.elementIdentifier), findBy.timeOut, "URL Not Loaded");97            return true;98        } catch(e) {99            return false;100        }101    }102    private async waitUntilElementIsPresent(findBy: Identifier): Promise<void> {103        let elementSelector: string;104        if(findBy.HTMLQuery instanceof Array && findBy.elementIdentifier instanceof Array) {105            if(findBy.elementIdentifier.length !== findBy.HTMLQuery.length) {106                throw new IdentifierError("Array length mismatch. Lengths do not match.");107            }108            for(let i = 0; i < findBy.elementIdentifier.length; i++) {109                elementSelector = findBy.elementIdentifier[i];110                switch(findBy.HTMLQuery[i]) {111                case HTMLQuery.ID:112                    await this.driver.wait(113                        until.elementIsEnabled(this.findElementById(elementSelector)),114                        findBy.timeOut,115                        'Could not find element. Timed Out.'116                    );117                    return;118                case HTMLQuery.CSS:119                    await this.driver.wait(120                        until.elementIsEnabled(this.findElementByCSS(elementSelector)),121                        findBy.timeOut,122                        'Could not find element. Timed Out.'123                    );124                    return;125                case HTMLQuery.JS:126                    return;127                }128            }129            return;130        }131        if(typeof findBy.HTMLQuery === "string" && findBy.elementIdentifier instanceof Array)132        {133            for(let i = 0; i < findBy.elementIdentifier.length; i++)134            {135                switch(findBy.HTMLQuery) {136                case HTMLQuery.ID:137                    await this.driver.wait(138                        until.elementIsEnabled(this.findElementById(findBy.elementIdentifier[i])),139                        findBy.timeOut,140                        'Could not find element. Timed Out.'141                    );142                    return;143                case HTMLQuery.CSS:144                    await this.driver.wait(145                        until.elementIsEnabled(this.findElementByCSS(findBy.elementIdentifier[i])),146                        findBy.timeOut,147                        'Could not find element. Timed Out.'148                    );149                    return;150                case HTMLQuery.JS:151                    return;152                }153            }154        }155        if(typeof findBy.HTMLQuery === "string" && typeof findBy.elementIdentifier === "string")156        {157            switch(findBy.HTMLQuery) {158            case HTMLQuery.ID:159                await this.driver.wait(160                    until.elementIsEnabled(this.findElementById(findBy.elementIdentifier)),161                    findBy.timeOut,162                    'Could not find element. Timed Out.'163                );164                return;165            case HTMLQuery.CSS:166                await this.driver.wait(167                    until.elementIsEnabled(this.findElementByCSS(findBy.elementIdentifier)),168                    findBy.timeOut,169                    'Could not find element. Timed Out.'170                );171                return;172            case HTMLQuery.JS:173                return;174            }175        }176    }177    /**178     *179     * @param findBy - Of type Identifier180     * <br> Consists of HTMLQuery: string | string[], elementIdentifier: string | string[] <br>181     * If HTMLQuery: string && elementIdentifier: string[], HTMLQuery will be default for all elementIdentifier182     * elements <br>183     * If HTMLQuery: string[] && elementIdentifer: string[], It will map each query type to its corresponding184     * elementIdentifier185     */186    private async waitUntilElementIsVisible(findBy: Identifier): Promise<void> {187        if(findBy.HTMLQuery instanceof Array && findBy.elementIdentifier instanceof Array) {188            if(findBy.elementIdentifier.length !== findBy.HTMLQuery.length) {189                throw new IdentifierError("Array length mismatch. Lengths do not match.");190            }191            for(let i = 0; i < findBy.elementIdentifier.length; i++) {192                if(findBy.HTMLQuery[i] === HTMLQuery.ID) {193                    await this.driver.wait(until.elementIsVisible(this.findElementById(findBy.elementIdentifier[i])));194                } else if(findBy.HTMLQuery[i] === HTMLQuery.CSS) {195                    await this.driver.wait(until.elementIsVisible(this.findElementByCSS(findBy.elementIdentifier[i])));196                }197            }198        }199        if(typeof findBy.HTMLQuery === "string" && findBy.elementIdentifier instanceof Array) {200            for(let i = 0; i < findBy.elementIdentifier.length; i++)201            {202                if(findBy.HTMLQuery === HTMLQuery.ID) {203                    try {204                        await this.driver.wait(until.elementIsVisible(this.findElementById(findBy.elementIdentifier[i])));205                    } catch(e) {206                        console.log("Could not find element: " + findBy.HTMLQuery)207                    }208                } else if(findBy.HTMLQuery === HTMLQuery.CSS) {209                    await this.driver.wait(until.elementIsVisible(this.findElementByCSS(findBy.elementIdentifier[i])));210                }211            }212        }213        if(typeof findBy.HTMLQuery === "string" && typeof findBy.elementIdentifier === "string") {214            if(findBy.HTMLQuery === HTMLQuery.ID) {215                try {216                    await this.driver.wait(until.elementIsVisible(this.findElementById(findBy.elementIdentifier)));217                } catch(e) {218                    console.log("Could not find element: " + findBy.HTMLQuery)219                }220            } else if(findBy.HTMLQuery === HTMLQuery.CSS) {221                await this.driver.wait(until.elementIsVisible(this.findElementByCSS(findBy.elementIdentifier)));222            }223        }224    }225    public async close(): Promise<void> {226        await this.driver.quit();227    }...

model-loader.ts

Source:model-loader.ts

...103    ref: ObjectRef<unknown>,104    modelName: string,105    builder: PothosSchemaTypes.SchemaBuilder<Types>,106  ): (model: Record<string, unknown>) => {} {107    const findBy = this.getDefaultFindBy(ref, modelName, builder);108    return this.getFindUnique(findBy);109  }110  static getDefaultIDSelection<Types extends SchemaTypes>(111    ref: ObjectRef<unknown>,112    modelName: string,113    builder: PothosSchemaTypes.SchemaBuilder<Types>,114  ): Record<string, boolean> {115    const findBy = this.getDefaultFindBy(ref, modelName, builder);116    if (typeof findBy === 'string') {117      return { [findBy]: true };118    }119    const result: Record<string, boolean> = {};120    for (const field of findBy.fields) {121      result[field] = true;122    }123    return result;124  }125  static getCursorSelection<Types extends SchemaTypes>(126    ref: ObjectRef<unknown>,127    modelName: string,128    cursor: string,129    builder: PothosSchemaTypes.SchemaBuilder<Types>,...

find.js

Source:find.js

1import EmberObject from '../../../system/object';2import { SuiteModuleBuilder } from '../suite';3const suite = SuiteModuleBuilder.create();4// ..........................................................5// find()6//7suite.module('find');8suite.test('find should invoke callback on each item as long as you return false', function() {9  let obj = this.newObject();10  let ary = this.toArray(obj);11  let found = [];12  let result;13  result = obj.find(function(i) {14    found.push(i);15    return false;16  });17  equal(result, undefined, 'return value of obj.find');18  deepEqual(found, ary, 'items passed during find() should match');19});20suite.test('every should stop invoking when you return true', function() {21  let obj = this.newObject();22  let ary = this.toArray(obj);23  let cnt = ary.length - 2;24  let exp = cnt;25  let found = [];26  let result;27  result = obj.find(function(i) {28    found.push(i);29    return --cnt >= 0;30  });31  equal(result, ary[exp - 1], 'return value of obj.find');32  equal(found.length, exp, 'should invoke proper number of times');33  deepEqual(found, ary.slice(0, -2), 'items passed during find() should match');34});35// ..........................................................36// findBy()37//38suite.module('findBy');39suite.test('should return first object of property matches', function() {40  let ary, obj;41  ary = [42    { foo: 'foo', bar: 'BAZ' },43    EmberObject.create({ foo: 'foo', bar: 'bar' })44  ];45  obj = this.newObject(ary);46  equal(obj.findBy('foo', 'foo'), ary[0], 'findBy(foo)');47  equal(obj.findBy('bar', 'bar'), ary[1], 'findBy(bar)');48});49suite.test('should return first object with truthy prop', function() {50  let ary, obj;51  ary = [52    { foo: 'foo', bar: false },53    EmberObject.create({ foo: 'bar', bar: true })54  ];55  obj = this.newObject(ary);56  // different values - all eval to true57  equal(obj.findBy('foo'), ary[0], 'findBy(foo)');58  equal(obj.findBy('bar'), ary[1], 'findBy(bar)');59});60suite.test('should return first null property match', function() {61  let ary, obj;62  ary = [63    { foo: null, bar: 'BAZ' },64    EmberObject.create({ foo: null, bar: null })65  ];66  obj = this.newObject(ary);67  equal(obj.findBy('foo', null), ary[0], 'findBy(\'foo\', null)');68  equal(obj.findBy('bar', null), ary[1], 'findBy(\'bar\', null)');69});70suite.test('should return first undefined property match', function() {71  let ary, obj;72  ary = [73    { foo: undefined, bar: 'BAZ' },74    EmberObject.create({ })75  ];76  obj = this.newObject(ary);77  equal(obj.findBy('foo', undefined), ary[0], 'findBy(\'foo\', undefined)');78  equal(obj.findBy('bar', undefined), ary[1], 'findBy(\'bar\', undefined)');79});...

Using AI Code Generation

1const { findBy } = require('storybook-test-runner');2const { findBy } = require('storybook-test-runner');3const { findBy } = require('storybook-test-runner');4const { findBy } = require('storybook-test-runner');5const { findBy } = require('storybook-test-runner');6const { findBy } = require('storybook-test-runner');7const { findBy } = require('storybook-test-runner');8const { findBy } = require('storybook-test-runner');9const { findBy } = require('storybook-test-runner');10const { findBy } = require('storybook-test-runner');11const { findBy } = require('storybook-test-runner');12const { findBy } = require('storybook-test-runner');13const { findBy } = require('storybook-test-runner');14const { findBy } = require('storybook-test-runner');15const { findBy } = require('storybook-test-runner');16const { findBy } = require('storybook-test-runner');17const { findBy } = require('storybook-test-runner');18const { findBy } = require('storybook-test-runner');19const { findBy } = require('storybook-test-runner');20const { findBy } = require('storybook-test-runner');21const { findBy } = require('storybook-test-runner');

Using AI Code Generation

1import { storiesOf } from '@storybook/react';2import { action } from '@storybook/addon-actions';3import { linkTo } from '@storybook/addon-links';4import { findBy } from 'storybook-test-runner';5import { Button, Welcome } from '@storybook/react/demo';6storiesOf('Button', module)7  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)8  .add('with some emoji', () => (9    <Button onClick={action('clicked')}>10  .add('with some emoji and text', () => (11    <Button onClick={action('clicked')}>12  ));13storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);14import { findBy } from 'storybook-test-runner';15describe('Button', () => {16  it('should render with text', async () => {17    const wrapper = await findBy('with text');18    expect(wrapper.text()).toEqual('Hello Button');19  });20  it('should render with some emoji', async () => {21    const wrapper = await findBy('with some emoji');22    expect(wrapper.text()).toEqual('😀 😎 👍 💯');23  });24  it('should render with some emoji and text', async () => {25    const wrapper = await findBy('with some emoji and text');26    expect(wrapper.text()).toEqual('😀 😎 👍 💯Hello Button');27  });28});29import { storiesOf } from '@storybook/react';30import { action } from '@storybook/addon-actions';31import { linkTo } from '@storybook/addon-links';32import { findByText } from 'storybook-test-runner';33import {

Using AI Code Generation

1import { findBy } from 'storybook-test-runner';2import { storiesOf } from '@storybook/react';3import { action } from '@storybook/addon-actions';4import { withKnobs, text } from '@storybook/addon-knobs';5import { Button } from './Button';6const stories = storiesOf('Button', module);7stories.addDecorator(withKnobs);8stories.add('with text', () => {9  const textValue = text('Text', 'Hello Button');10  return findBy(11    <Button onClick={action('clicked')}>{textValue}</Button>,12  );13});14import { findBy } from 'storybook-test-runner';15import { storiesOf } from '@storybook/react';16import { action } from '@storybook/addon-actions';17import { withKnobs, text } from '@storybook/addon-knobs';18import { Button } from './Button';19const stories = storiesOf('Button', module);20stories.addDecorator(withKnobs);21stories.add('with text', () => {22  const textValue = text('Text', 'Hello Button');23  return findBy(24    <Button onClick={action('clicked')}>{textValue}</Button>,25  );26});

Using AI Code Generation

1import { findBy } from 'storybook-test-runner';2import { storiesOf } from '@storybook/react';3const story = storiesOf('Story Name', module);4story.add('Story Name', () => {5  return <div data-testid="test-id">Hello World</div>;6});7test('test', async () => {8  const element = await findBy('test-id');9  expect(element).toBeTruthy();10});11import { findBy } from 'storybook-test-runner';12import { storiesOf } from '@storybook/react';13const story = storiesOf('Story Name', module);14story.add('Story Name', () => {15  return <div data-testid="test-id">Hello World</div>;16});17test('test', async () => {18  const element = await findBy('test-id');19  expect(element).toBeTruthy();20});21import { findBy } from 'storybook-test-runner';22import { storiesOf } from '@storybook/react';23const story = storiesOf('Story Name', module);24story.add('Story Name', () => {25  return <div data-testid="test-id">Hello World</div>;26});27test('test', async () => {28  const element = await findBy('test-id');29  expect(element).toBeTruthy();30});31import { findBy } from 'storybook-test-runner';32import { storiesOf } from '@storybook/react';33const story = storiesOf('Story Name', module);34story.add('Story Name', () => {35  return <div data-testid="test-id">Hello World</div>;36});37test('test', async () => {38  const element = await findBy('test-id');39  expect(element).toBeTruthy();40});41import { findBy } from 'storybook-test-runner';42import { storiesOf } from '@storybook/react';43const story = storiesOf('Story Name', module);44story.add('Story Name', () => {45  return <div data-testid="test-id">Hello World</div>;46});47test('test', async () => {48  const element = await findBy('test-id');49  expect(element).toBeTruthy();50});

Using AI Code Generation

1const { findBy } = require('storybook-test-runner');2const { button } = require('./stories/button.stories');3describe('Button', () => {4  test('renders button', async () => {5    const { container } = await findBy(button, {6      props: {7      },8    });9    expect(container).toHaveTextContent('Click me');10  });11});12const { h } = require('preact');13const { action } = require('@storybook/addon-actions');14const Button = ({ label, onClick }) => (15  <button onClick={onClick}>{label}</button>16);17module.exports = {18  button: () => (19    <Button label="Click me" onClick={action('clicked')} />20};21const { configure } = require('@storybook/preact');22configure(require.context('../stories', true, /\.stories\.js$/), module);23{24  "scripts": {25  },26  "devDependencies": {27  }28}29module.exports = {30  transform: {31  },32};

Using AI Code Generation

1import { findBy } from 'storybook-test-runner';2const button = findBy('button');3export default { title: 'button' };4export const buttonWithText = () => button('Hello Button');5export const buttonWithEmoji = () => button('😀 😎 👍 💯');6export const buttonWithSomeEmojiAndText = () =>7  button('This is a button with emojis 😀 😎 👍 💯');8export const buttonWithSomeEmojiAndTextAndAction = () =>9  button('This is a button with emojis 😀 😎 👍 💯', () => alert('button clicked'));10export const buttonWithSomeEmojiAndTextAndActionAndSomeMoreText = () =>11  button(12    () => alert('button clicked')13  );

Using AI Code Generation

1import { findBy } from 'storybook-test-runner';2const element = await findBy({ id: 'myId' });3console.log(element);4import { findBy } from 'storybook-test-runner';5const element = await findBy({ id: 'myId' });6console.log(element);7import { findBy } from 'storybook-test-runner';8const element = await findBy({ id: 'myId' });9console.log(element);10import { findBy } from 'storybook-test-runner';11const element = await findBy({ id: 'myId' });12console.log(element);13import { findBy } from 'storybook-test-runner';14const element = await findBy({ id: 'myId' });15console.log(element);16import { findBy } from 'storybook-test-runner';17const element = await findBy({ id: 'myId' });18console.log(element);19import { findBy } from 'storybook-test-runner';20const element = await findBy({ id: 'myId' });21console.log(element);22import { findBy } from 'storybook-test-runner';23const element = await findBy({ id: '

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.