KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use page.setContent method in qawolf

Best JavaScript code snippet using qawolf

queryselector.spec.ts

Source:queryselector.spec.ts

...25  setupTestPageAndContextHooks();26  describe('Page.$eval', function () {27    it('should work', async () => {28      const { page } = getTestState();29      await page.setContent('<section id="testAttribute">43543</section>');30      const idAttribute = await page.$eval('section', (e) => e.id);31      expect(idAttribute).toBe('testAttribute');32    });33    it('should accept arguments', async () => {34      const { page } = getTestState();35      await page.setContent('<section>hello</section>');36      const text = await page.$eval(37        'section',38        (e, suffix) => e.textContent + suffix,39        ' world!'40      );41      expect(text).toBe('hello world!');42    });43    it('should accept ElementHandles as arguments', async () => {44      const { page } = getTestState();45      await page.setContent('<section>hello</section><div> world</div>');46      const divHandle = await page.$('div');47      const text = await page.$eval(48        'section',49        (e, div: HTMLElement) => e.textContent + div.textContent,50        divHandle51      );52      expect(text).toBe('hello world');53    });54    it('should throw error if no element is found', async () => {55      const { page } = getTestState();56      let error = null;57      await page58        .$eval('section', (e) => e.id)59        .catch((error_) => (error = error_));60      expect(error.message).toContain(61        'failed to find element matching selector "section"'62      );63    });64  });65  describe('pierceHandler', function () {66    beforeEach(async () => {67      const { page } = getTestState();68      await page.setContent(69        `<script>70        const div = document.createElement('div');71        const shadowRoot = div.attachShadow({mode: 'open'});72        const div1 = document.createElement('div');73        div1.textContent = 'Hello';74        div1.className = 'foo';75        const div2 = document.createElement('div');76        div2.textContent = 'World';77        div2.className = 'foo';78        shadowRoot.appendChild(div1);79        shadowRoot.appendChild(div2);80        document.documentElement.appendChild(div);81        </script>`82      );83    });84    it('should find first element in shadow', async () => {85      const { page } = getTestState();86      const div = await page.$('pierce/.foo');87      const text = await div.evaluate(88        (element: Element) => element.textContent89      );90      expect(text).toBe('Hello');91    });92    it('should find all elements in shadow', async () => {93      const { page } = getTestState();94      const divs = await page.$$('pierce/.foo');95      const text = await Promise.all(96        divs.map((div) =>97          div.evaluate((element: Element) => element.textContent)98        )99      );100      expect(text.join(' ')).toBe('Hello World');101    });102  });103  // The tests for $$eval are repeated later in this file in the test group 'QueryAll'.104  // This is done to also test a query handler where QueryAll returns an Element[]105  // as opposed to NodeListOf<Element>.106  describe('Page.$$eval', function () {107    it('should work', async () => {108      const { page } = getTestState();109      await page.setContent(110        '<div>hello</div><div>beautiful</div><div>world!</div>'111      );112      const divsCount = await page.$$eval('div', (divs) => divs.length);113      expect(divsCount).toBe(3);114    });115    it('should accept extra arguments', async () => {116      const { page } = getTestState();117      await page.setContent(118        '<div>hello</div><div>beautiful</div><div>world!</div>'119      );120      const divsCountPlus5 = await page.$$eval(121        'div',122        (divs, two: number, three: number) => divs.length + two + three,123        2,124        3125      );126      expect(divsCountPlus5).toBe(8);127    });128    it('should accept ElementHandles as arguments', async () => {129      const { page } = getTestState();130      await page.setContent(131        '<section>2</section><section>2</section><section>1</section><div>3</div>'132      );133      const divHandle = await page.$('div');134      const sum = await page.$$eval(135        'section',136        (sections, div: HTMLElement) =>137          sections.reduce(138            (acc, section) => acc + Number(section.textContent),139            0140          ) + Number(div.textContent),141        divHandle142      );143      expect(sum).toBe(8);144    });145    it('should handle many elements', async () => {146      const { page } = getTestState();147      await page.evaluate(148        `149        for (var i = 0; i <= 1000; i++) {150            const section = document.createElement('section');151            section.textContent = i;152            document.body.appendChild(section);153        }154        `155      );156      const sum = await page.$$eval('section', (sections) =>157        sections.reduce((acc, section) => acc + Number(section.textContent), 0)158      );159      expect(sum).toBe(500500);160    });161  });162  describe('Page.$', function () {163    it('should query existing element', async () => {164      const { page } = getTestState();165      await page.setContent('<section>test</section>');166      const element = await page.$('section');167      expect(element).toBeTruthy();168    });169    it('should return null for non-existing element', async () => {170      const { page } = getTestState();171      const element = await page.$('non-existing-element');172      expect(element).toBe(null);173    });174  });175  describe('Page.$$', function () {176    it('should query existing elements', async () => {177      const { page } = getTestState();178      await page.setContent('<div>A</div><br/><div>B</div>');179      const elements = await page.$$('div');180      expect(elements.length).toBe(2);181      const promises = elements.map((element) =>182        page.evaluate((e: HTMLElement) => e.textContent, element)183      );184      expect(await Promise.all(promises)).toEqual(['A', 'B']);185    });186    it('should return empty array if nothing is found', async () => {187      const { page, server } = getTestState();188      await page.goto(server.EMPTY_PAGE);189      const elements = await page.$$('div');190      expect(elements.length).toBe(0);191    });192  });193  describe('Path.$x', function () {194    it('should query existing element', async () => {195      const { page } = getTestState();196      await page.setContent('<section>test</section>');197      const elements = await page.$x('/html/body/section');198      expect(elements[0]).toBeTruthy();199      expect(elements.length).toBe(1);200    });201    it('should return empty array for non-existing element', async () => {202      const { page } = getTestState();203      const element = await page.$x('/html/body/non-existing-element');204      expect(element).toEqual([]);205    });206    it('should return multiple elements', async () => {207      const { page } = getTestState();208      await page.setContent('<div></div><div></div>');209      const elements = await page.$x('/html/body/div');210      expect(elements.length).toBe(2);211    });212  });213  describe('ElementHandle.$', function () {214    it('should query existing element', async () => {215      const { page, server } = getTestState();216      await page.goto(server.PREFIX + '/playground.html');217      await page.setContent(218        '<html><body><div class="second"><div class="inner">A</div></div></body></html>'219      );220      const html = await page.$('html');221      const second = await html.$('.second');222      const inner = await second.$('.inner');223      const content = await page.evaluate(224        (e: HTMLElement) => e.textContent,225        inner226      );227      expect(content).toBe('A');228    });229    it('should return null for non-existing element', async () => {230      const { page } = getTestState();231      await page.setContent(232        '<html><body><div class="second"><div class="inner">B</div></div></body></html>'233      );234      const html = await page.$('html');235      const second = await html.$('.third');236      expect(second).toBe(null);237    });238  });239  describe('ElementHandle.$eval', function () {240    it('should work', async () => {241      const { page } = getTestState();242      await page.setContent(243        '<html><body><div class="tweet"><div class="like">100</div><div class="retweets">10</div></div></body></html>'244      );245      const tweet = await page.$('.tweet');246      const content = await tweet.$eval(247        '.like',248        (node: HTMLElement) => node.innerText249      );250      expect(content).toBe('100');251    });252    it('should retrieve content from subtree', async () => {253      const { page } = getTestState();254      const htmlContent =255        '<div class="a">not-a-child-div</div><div id="myId"><div class="a">a-child-div</div></div>';256      await page.setContent(htmlContent);257      const elementHandle = await page.$('#myId');258      const content = await elementHandle.$eval(259        '.a',260        (node: HTMLElement) => node.innerText261      );262      expect(content).toBe('a-child-div');263    });264    it('should throw in case of missing selector', async () => {265      const { page } = getTestState();266      const htmlContent =267        '<div class="a">not-a-child-div</div><div id="myId"></div>';268      await page.setContent(htmlContent);269      const elementHandle = await page.$('#myId');270      const errorMessage = await elementHandle271        .$eval('.a', (node: HTMLElement) => node.innerText)272        .catch((error) => error.message);273      expect(errorMessage).toBe(274        `Error: failed to find element matching selector ".a"`275      );276    });277  });278  describe('ElementHandle.$$eval', function () {279    it('should work', async () => {280      const { page } = getTestState();281      await page.setContent(282        '<html><body><div class="tweet"><div class="like">100</div><div class="like">10</div></div></body></html>'283      );284      const tweet = await page.$('.tweet');285      const content = await tweet.$$eval('.like', (nodes: HTMLElement[]) =>286        nodes.map((n) => n.innerText)287      );288      expect(content).toEqual(['100', '10']);289    });290    it('should retrieve content from subtree', async () => {291      const { page } = getTestState();292      const htmlContent =293        '<div class="a">not-a-child-div</div><div id="myId"><div class="a">a1-child-div</div><div class="a">a2-child-div</div></div>';294      await page.setContent(htmlContent);295      const elementHandle = await page.$('#myId');296      const content = await elementHandle.$$eval('.a', (nodes: HTMLElement[]) =>297        nodes.map((n) => n.innerText)298      );299      expect(content).toEqual(['a1-child-div', 'a2-child-div']);300    });301    it('should not throw in case of missing selector', async () => {302      const { page } = getTestState();303      const htmlContent =304        '<div class="a">not-a-child-div</div><div id="myId"></div>';305      await page.setContent(htmlContent);306      const elementHandle = await page.$('#myId');307      const nodesLength = await elementHandle.$$eval(308        '.a',309        (nodes) => nodes.length310      );311      expect(nodesLength).toBe(0);312    });313  });314  describe('ElementHandle.$$', function () {315    it('should query existing elements', async () => {316      const { page } = getTestState();317      await page.setContent(318        '<html><body><div>A</div><br/><div>B</div></body></html>'319      );320      const html = await page.$('html');321      const elements = await html.$$('div');322      expect(elements.length).toBe(2);323      const promises = elements.map((element) =>324        page.evaluate((e: HTMLElement) => e.textContent, element)325      );326      expect(await Promise.all(promises)).toEqual(['A', 'B']);327    });328    it('should return empty array for non-existing elements', async () => {329      const { page } = getTestState();330      await page.setContent(331        '<html><body><span>A</span><br/><span>B</span></body></html>'332      );333      const html = await page.$('html');334      const elements = await html.$$('div');335      expect(elements.length).toBe(0);336    });337  });338  describe('ElementHandle.$x', function () {339    it('should query existing element', async () => {340      const { page, server } = getTestState();341      await page.goto(server.PREFIX + '/playground.html');342      await page.setContent(343        '<html><body><div class="second"><div class="inner">A</div></div></body></html>'344      );345      const html = await page.$('html');346      const second = await html.$x(`./body/div[contains(@class, 'second')]`);347      const inner = await second[0].$x(`./div[contains(@class, 'inner')]`);348      const content = await page.evaluate(349        (e: HTMLElement) => e.textContent,350        inner[0]351      );352      expect(content).toBe('A');353    });354    it('should return null for non-existing element', async () => {355      const { page } = getTestState();356      await page.setContent(357        '<html><body><div class="second"><div class="inner">B</div></div></body></html>'358      );359      const html = await page.$('html');360      const second = await html.$x(`/div[contains(@class, 'third')]`);361      expect(second).toEqual([]);362    });363  });364  // This is the same tests for `$$eval` and `$$` as above, but with a queryAll365  // handler that returns an array instead of a list of nodes.366  describe('QueryAll', function () {367    const handler: CustomQueryHandler = {368      queryAll: (element: Element, selector: string) =>369        Array.from(element.querySelectorAll(selector)),370    };371    before(() => {372      const { puppeteer } = getTestState();373      puppeteer.registerCustomQueryHandler('allArray', handler);374    });375    it('should have registered handler', async () => {376      const { puppeteer } = getTestState();377      expect(378        puppeteer.customQueryHandlerNames().includes('allArray')379      ).toBeTruthy();380    });381    it('$$ should query existing elements', async () => {382      const { page } = getTestState();383      await page.setContent(384        '<html><body><div>A</div><br/><div>B</div></body></html>'385      );386      const html = await page.$('html');387      const elements = await html.$$('allArray/div');388      expect(elements.length).toBe(2);389      const promises = elements.map((element) =>390        page.evaluate((e: HTMLElement) => e.textContent, element)391      );392      expect(await Promise.all(promises)).toEqual(['A', 'B']);393    });394    it('$$ should return empty array for non-existing elements', async () => {395      const { page } = getTestState();396      await page.setContent(397        '<html><body><span>A</span><br/><span>B</span></body></html>'398      );399      const html = await page.$('html');400      const elements = await html.$$('allArray/div');401      expect(elements.length).toBe(0);402    });403    it('$$eval should work', async () => {404      const { page } = getTestState();405      await page.setContent(406        '<div>hello</div><div>beautiful</div><div>world!</div>'407      );408      const divsCount = await page.$$eval(409        'allArray/div',410        (divs) => divs.length411      );412      expect(divsCount).toBe(3);413    });414    it('$$eval should accept extra arguments', async () => {415      const { page } = getTestState();416      await page.setContent(417        '<div>hello</div><div>beautiful</div><div>world!</div>'418      );419      const divsCountPlus5 = await page.$$eval(420        'allArray/div',421        (divs, two: number, three: number) => divs.length + two + three,422        2,423        3424      );425      expect(divsCountPlus5).toBe(8);426    });427    it('$$eval should accept ElementHandles as arguments', async () => {428      const { page } = getTestState();429      await page.setContent(430        '<section>2</section><section>2</section><section>1</section><div>3</div>'431      );432      const divHandle = await page.$('div');433      const sum = await page.$$eval(434        'allArray/section',435        (sections, div: HTMLElement) =>436          sections.reduce(437            (acc, section) => acc + Number(section.textContent),438            0439          ) + Number(div.textContent),440        divHandle441      );442      expect(sum).toBe(8);443    });...

accessibility.spec.ts

Source:accessibility.spec.ts

...24  setupTestBrowserHooks();25  setupTestPageAndContextHooks();26  it('should work', async () => {27    const { page, isFirefox } = getTestState();28    await page.setContent(`29      <head>30        <title>Accessibility Test</title>31      </head>32      <body>33        <div>Hello World</div>34        <h1>Inputs</h1>35        <input placeholder="Empty input" autofocus />36        <input placeholder="readonly input" readonly />37        <input placeholder="disabled input" disabled />38        <input aria-label="Input with whitespace" value="  " />39        <input value="value only" />40        <input aria-placeholder="placeholder" value="and a value" />41        <div aria-hidden="true" id="desc">This is a description!</div>42        <input aria-placeholder="placeholder" value="and a value" aria-describedby="desc" />43        <select>44          <option>First Option</option>45          <option>Second Option</option>46        </select>47      </body>`);48    await page.focus('[placeholder="Empty input"]');49    const golden = isFirefox50      ? {51          role: 'document',52          name: 'Accessibility Test',53          children: [54            { role: 'text leaf', name: 'Hello World' },55            { role: 'heading', name: 'Inputs', level: 1 },56            { role: 'entry', name: 'Empty input', focused: true },57            { role: 'entry', name: 'readonly input', readonly: true },58            { role: 'entry', name: 'disabled input', disabled: true },59            { role: 'entry', name: 'Input with whitespace', value: '  ' },60            { role: 'entry', name: '', value: 'value only' },61            { role: 'entry', name: '', value: 'and a value' }, // firefox doesn't use aria-placeholder for the name62            {63              role: 'entry',64              name: '',65              value: 'and a value',66              description: 'This is a description!',67            }, // and here68            {69              role: 'combobox',70              name: '',71              value: 'First Option',72              haspopup: true,73              children: [74                {75                  role: 'combobox option',76                  name: 'First Option',77                  selected: true,78                },79                { role: 'combobox option', name: 'Second Option' },80              ],81            },82          ],83        }84      : {85          role: 'WebArea',86          name: 'Accessibility Test',87          children: [88            { role: 'text', name: 'Hello World' },89            { role: 'heading', name: 'Inputs', level: 1 },90            { role: 'textbox', name: 'Empty input', focused: true },91            { role: 'textbox', name: 'readonly input', readonly: true },92            { role: 'textbox', name: 'disabled input', disabled: true },93            { role: 'textbox', name: 'Input with whitespace', value: '  ' },94            { role: 'textbox', name: '', value: 'value only' },95            { role: 'textbox', name: 'placeholder', value: 'and a value' },96            {97              role: 'textbox',98              name: 'placeholder',99              value: 'and a value',100              description: 'This is a description!',101            },102            {103              role: 'combobox',104              name: '',105              value: 'First Option',106              children: [107                { role: 'menuitem', name: 'First Option', selected: true },108                { role: 'menuitem', name: 'Second Option' },109              ],110            },111          ],112        };113    expect(await page.accessibility.snapshot()).toEqual(golden);114  });115  it('should report uninteresting nodes', async () => {116    const { page, isFirefox } = getTestState();117    await page.setContent(`<textarea>hi</textarea>`);118    await page.focus('textarea');119    const golden = isFirefox120      ? {121          role: 'entry',122          name: '',123          value: 'hi',124          focused: true,125          multiline: true,126          children: [127            {128              role: 'text leaf',129              name: 'hi',130            },131          ],132        }133      : {134          role: 'textbox',135          name: '',136          value: 'hi',137          focused: true,138          multiline: true,139          children: [140            {141              role: 'generic',142              name: '',143              children: [144                {145                  role: 'text',146                  name: 'hi',147                },148              ],149            },150          ],151        };152    expect(153      findFocusedNode(154        await page.accessibility.snapshot({ interestingOnly: false })155      )156    ).toEqual(golden);157  });158  it('roledescription', async () => {159    const { page } = getTestState();160    await page.setContent(161      '<div tabIndex=-1 aria-roledescription="foo">Hi</div>'162    );163    const snapshot = await page.accessibility.snapshot();164    expect(snapshot.children[0].roledescription).toEqual('foo');165  });166  it('orientation', async () => {167    const { page } = getTestState();168    await page.setContent(169      '<a href="" role="slider" aria-orientation="vertical">11</a>'170    );171    const snapshot = await page.accessibility.snapshot();172    expect(snapshot.children[0].orientation).toEqual('vertical');173  });174  it('autocomplete', async () => {175    const { page } = getTestState();176    await page.setContent('<input type="number" aria-autocomplete="list" />');177    const snapshot = await page.accessibility.snapshot();178    expect(snapshot.children[0].autocomplete).toEqual('list');179  });180  it('multiselectable', async () => {181    const { page } = getTestState();182    await page.setContent(183      '<div role="grid" tabIndex=-1 aria-multiselectable=true>hey</div>'184    );185    const snapshot = await page.accessibility.snapshot();186    expect(snapshot.children[0].multiselectable).toEqual(true);187  });188  it('keyshortcuts', async () => {189    const { page } = getTestState();190    await page.setContent(191      '<div role="grid" tabIndex=-1 aria-keyshortcuts="foo">hey</div>'192    );193    const snapshot = await page.accessibility.snapshot();194    expect(snapshot.children[0].keyshortcuts).toEqual('foo');195  });196  describe('filtering children of leaf nodes', function () {197    it('should not report text nodes inside controls', async () => {198      const { page, isFirefox } = getTestState();199      await page.setContent(`200        <div role="tablist">201          <div role="tab" aria-selected="true"><b>Tab1</b></div>202          <div role="tab">Tab2</div>203        </div>`);204      const golden = isFirefox205        ? {206            role: 'document',207            name: '',208            children: [209              {210                role: 'pagetab',211                name: 'Tab1',212                selected: true,213              },214              {215                role: 'pagetab',216                name: 'Tab2',217              },218            ],219          }220        : {221            role: 'WebArea',222            name: '',223            children: [224              {225                role: 'tab',226                name: 'Tab1',227                selected: true,228              },229              {230                role: 'tab',231                name: 'Tab2',232              },233            ],234          };235      expect(await page.accessibility.snapshot()).toEqual(golden);236    });237    it('rich text editable fields should have children', async () => {238      const { page, isFirefox } = getTestState();239      await page.setContent(`240        <div contenteditable="true">241          Edit this image: <img src="fakeimage.png" alt="my fake image">242        </div>`);243      const golden = isFirefox244        ? {245            role: 'section',246            name: '',247            children: [248              {249                role: 'text leaf',250                name: 'Edit this image: ',251              },252              {253                role: 'text',254                name: 'my fake image',255              },256            ],257          }258        : {259            role: 'generic',260            name: '',261            value: 'Edit this image: ',262            children: [263              {264                role: 'text',265                name: 'Edit this image:',266              },267              {268                role: 'img',269                name: 'my fake image',270              },271            ],272          };273      const snapshot = await page.accessibility.snapshot();274      expect(snapshot.children[0]).toEqual(golden);275    });276    it('rich text editable fields with role should have children', async () => {277      const { page, isFirefox } = getTestState();278      await page.setContent(`279        <div contenteditable="true" role='textbox'>280          Edit this image: <img src="fakeimage.png" alt="my fake image">281        </div>`);282      const golden = isFirefox283        ? {284            role: 'entry',285            name: '',286            value: 'Edit this image: my fake image',287            children: [288              {289                role: 'text',290                name: 'my fake image',291              },292            ],293          }294        : {295            role: 'textbox',296            name: '',297            value: 'Edit this image: ',298            children: [299              {300                role: 'text',301                name: 'Edit this image:',302              },303              {304                role: 'img',305                name: 'my fake image',306              },307            ],308          };309      const snapshot = await page.accessibility.snapshot();310      expect(snapshot.children[0]).toEqual(golden);311    });312    // Firefox does not support contenteditable="plaintext-only".313    describeFailsFirefox('plaintext contenteditable', function () {314      it('plain text field with role should not have children', async () => {315        const { page } = getTestState();316        await page.setContent(`317          <div contenteditable="plaintext-only" role='textbox'>Edit this image:<img src="fakeimage.png" alt="my fake image"></div>`);318        const snapshot = await page.accessibility.snapshot();319        expect(snapshot.children[0]).toEqual({320          role: 'textbox',321          name: '',322          value: 'Edit this image:',323        });324      });325      it('plain text field without role should not have content', async () => {326        const { page } = getTestState();327        await page.setContent(`328          <div contenteditable="plaintext-only">Edit this image:<img src="fakeimage.png" alt="my fake image"></div>`);329        const snapshot = await page.accessibility.snapshot();330        expect(snapshot.children[0]).toEqual({331          role: 'generic',332          name: '',333        });334      });335      it('plain text field with tabindex and without role should not have content', async () => {336        const { page } = getTestState();337        await page.setContent(`338          <div contenteditable="plaintext-only" tabIndex=0>Edit this image:<img src="fakeimage.png" alt="my fake image"></div>`);339        const snapshot = await page.accessibility.snapshot();340        expect(snapshot.children[0]).toEqual({341          role: 'generic',342          name: '',343        });344      });345    });346    it('non editable textbox with role and tabIndex and label should not have children', async () => {347      const { page, isFirefox } = getTestState();348      await page.setContent(`349        <div role="textbox" tabIndex=0 aria-checked="true" aria-label="my favorite textbox">350          this is the inner content351          <img alt="yo" src="fakeimg.png">352        </div>`);353      const golden = isFirefox354        ? {355            role: 'entry',356            name: 'my favorite textbox',357            value: 'this is the inner content yo',358          }359        : {360            role: 'textbox',361            name: 'my favorite textbox',362            value: 'this is the inner content ',363          };364      const snapshot = await page.accessibility.snapshot();365      expect(snapshot.children[0]).toEqual(golden);366    });367    it('checkbox with and tabIndex and label should not have children', async () => {368      const { page, isFirefox } = getTestState();369      await page.setContent(`370        <div role="checkbox" tabIndex=0 aria-checked="true" aria-label="my favorite checkbox">371          this is the inner content372          <img alt="yo" src="fakeimg.png">373        </div>`);374      const golden = isFirefox375        ? {376            role: 'checkbutton',377            name: 'my favorite checkbox',378            checked: true,379          }380        : {381            role: 'checkbox',382            name: 'my favorite checkbox',383            checked: true,384          };385      const snapshot = await page.accessibility.snapshot();386      expect(snapshot.children[0]).toEqual(golden);387    });388    it('checkbox without label should not have children', async () => {389      const { page, isFirefox } = getTestState();390      await page.setContent(`391        <div role="checkbox" aria-checked="true">392          this is the inner content393          <img alt="yo" src="fakeimg.png">394        </div>`);395      const golden = isFirefox396        ? {397            role: 'checkbutton',398            name: 'this is the inner content yo',399            checked: true,400          }401        : {402            role: 'checkbox',403            name: 'this is the inner content yo',404            checked: true,405          };406      const snapshot = await page.accessibility.snapshot();407      expect(snapshot.children[0]).toEqual(golden);408    });409    describe('root option', function () {410      it('should work a button', async () => {411        const { page } = getTestState();412        await page.setContent(`<button>My Button</button>`);413        const button = await page.$('button');414        expect(await page.accessibility.snapshot({ root: button })).toEqual({415          role: 'button',416          name: 'My Button',417        });418      });419      it('should work an input', async () => {420        const { page } = getTestState();421        await page.setContent(`<input title="My Input" value="My Value">`);422        const input = await page.$('input');423        expect(await page.accessibility.snapshot({ root: input })).toEqual({424          role: 'textbox',425          name: 'My Input',426          value: 'My Value',427        });428      });429      it('should work a menu', async () => {430        const { page } = getTestState();431        await page.setContent(`432            <div role="menu" title="My Menu">433              <div role="menuitem">First Item</div>434              <div role="menuitem">Second Item</div>435              <div role="menuitem">Third Item</div>436            </div>437          `);438        const menu = await page.$('div[role="menu"]');439        expect(await page.accessibility.snapshot({ root: menu })).toEqual({440          role: 'menu',441          name: 'My Menu',442          children: [443            { role: 'menuitem', name: 'First Item' },444            { role: 'menuitem', name: 'Second Item' },445            { role: 'menuitem', name: 'Third Item' },446          ],447        });448      });449      it('should return null when the element is no longer in DOM', async () => {450        const { page } = getTestState();451        await page.setContent(`<button>My Button</button>`);452        const button = await page.$('button');453        await page.$eval('button', (button) => button.remove());454        expect(await page.accessibility.snapshot({ root: button })).toEqual(455          null456        );457      });458      it('should support the interestingOnly option', async () => {459        const { page } = getTestState();460        await page.setContent(`<div><button>My Button</button></div>`);461        const div = await page.$('div');462        expect(await page.accessibility.snapshot({ root: div })).toEqual(null);463        expect(464          await page.accessibility.snapshot({465            root: div,466            interestingOnly: false,467          })468        ).toEqual({469          role: 'generic',470          name: '',471          children: [472            {473              role: 'button',474              name: 'My Button',...

queryselector.spec.js

Source:queryselector.spec.js

...20  setupTestPageAndContextHooks();21  describeFailsFirefox('Page.$eval', function() {22    it('should work', async() => {23      const {page} = getTestState();24      await page.setContent('<section id="testAttribute">43543</section>');25      const idAttribute = await page.$eval('section', e => e.id);26      expect(idAttribute).toBe('testAttribute');27    });28    it('should accept arguments', async() => {29      const {page} = getTestState();30      await page.setContent('<section>hello</section>');31      const text = await page.$eval('section', (e, suffix) => e.textContent + suffix, ' world!');32      expect(text).toBe('hello world!');33    });34    it('should accept ElementHandles as arguments', async() => {35      const {page} = getTestState();36      await page.setContent('<section>hello</section><div> world</div>');37      const divHandle = await page.$('div');38      const text = await page.$eval('section', (e, div) => e.textContent + div.textContent, divHandle);39      expect(text).toBe('hello world');40    });41    it('should throw error if no element is found', async() => {42      const {page} = getTestState();43      let error = null;44      await page.$eval('section', e => e.id).catch(error_ => error = error_);45      expect(error.message).toContain('failed to find element matching selector "section"');46    });47  });48  describeFailsFirefox('Page.$$eval', function() {49    it('should work', async() => {50      const {page} = getTestState();51      await page.setContent('<div>hello</div><div>beautiful</div><div>world!</div>');52      const divsCount = await page.$$eval('div', divs => divs.length);53      expect(divsCount).toBe(3);54    });55  });56  describeFailsFirefox('Page.$', function() {57    it('should query existing element', async() => {58      const {page} = getTestState();59      await page.setContent('<section>test</section>');60      const element = await page.$('section');61      expect(element).toBeTruthy();62    });63    it('should return null for non-existing element', async() => {64      const {page} = getTestState();65      const element = await page.$('non-existing-element');66      expect(element).toBe(null);67    });68  });69  describe('Page.$$', function() {70    itFailsFirefox('should query existing elements', async() => {71      const {page} = getTestState();72      await page.setContent('<div>A</div><br/><div>B</div>');73      const elements = await page.$$('div');74      expect(elements.length).toBe(2);75      const promises = elements.map(element => page.evaluate(e => e.textContent, element));76      expect(await Promise.all(promises)).toEqual(['A', 'B']);77    });78    it('should return empty array if nothing is found', async() => {79      const {page, server} = getTestState();80      await page.goto(server.EMPTY_PAGE);81      const elements = await page.$$('div');82      expect(elements.length).toBe(0);83    });84  });85  describeFailsFirefox('Path.$x', function() {86    it('should query existing element', async() => {87      const {page} = getTestState();88      await page.setContent('<section>test</section>');89      const elements = await page.$x('/html/body/section');90      expect(elements[0]).toBeTruthy();91      expect(elements.length).toBe(1);92    });93    it('should return empty array for non-existing element', async() => {94      const {page} = getTestState();95      const element = await page.$x('/html/body/non-existing-element');96      expect(element).toEqual([]);97    });98    it('should return multiple elements', async() => {99      const {page} = getTestState();100      await page.setContent('<div></div><div></div>');101      const elements = await page.$x('/html/body/div');102      expect(elements.length).toBe(2);103    });104  });105  describe('ElementHandle.$', function() {106    it('should query existing element', async() => {107      const {page, server} = getTestState();108      await page.goto(server.PREFIX + '/playground.html');109      await page.setContent('<html><body><div class="second"><div class="inner">A</div></div></body></html>');110      const html = await page.$('html');111      const second = await html.$('.second');112      const inner = await second.$('.inner');113      const content = await page.evaluate(e => e.textContent, inner);114      expect(content).toBe('A');115    });116    itFailsFirefox('should return null for non-existing element', async() => {117      const {page} = getTestState();118      await page.setContent('<html><body><div class="second"><div class="inner">B</div></div></body></html>');119      const html = await page.$('html');120      const second = await html.$('.third');121      expect(second).toBe(null);122    });123  });124  describeFailsFirefox('ElementHandle.$eval', function() {125    it('should work', async() => {126      const {page} = getTestState();127      await page.setContent('<html><body><div class="tweet"><div class="like">100</div><div class="retweets">10</div></div></body></html>');128      const tweet = await page.$('.tweet');129      const content = await tweet.$eval('.like', node => node.innerText);130      expect(content).toBe('100');131    });132    it('should retrieve content from subtree', async() => {133      const {page} = getTestState();134      const htmlContent = '<div class="a">not-a-child-div</div><div id="myId"><div class="a">a-child-div</div></div>';135      await page.setContent(htmlContent);136      const elementHandle = await page.$('#myId');137      const content = await elementHandle.$eval('.a', node => node.innerText);138      expect(content).toBe('a-child-div');139    });140    it('should throw in case of missing selector', async() => {141      const {page} = getTestState();142      const htmlContent = '<div class="a">not-a-child-div</div><div id="myId"></div>';143      await page.setContent(htmlContent);144      const elementHandle = await page.$('#myId');145      const errorMessage = await elementHandle.$eval('.a', node => node.innerText).catch(error => error.message);146      expect(errorMessage).toBe(`Error: failed to find element matching selector ".a"`);147    });148  });149  describeFailsFirefox('ElementHandle.$$eval', function() {150    it('should work', async() => {151      const {page} = getTestState();152      await page.setContent('<html><body><div class="tweet"><div class="like">100</div><div class="like">10</div></div></body></html>');153      const tweet = await page.$('.tweet');154      const content = await tweet.$$eval('.like', nodes => nodes.map(n => n.innerText));155      expect(content).toEqual(['100', '10']);156    });157    it('should retrieve content from subtree', async() => {158      const {page} = getTestState();159      const htmlContent = '<div class="a">not-a-child-div</div><div id="myId"><div class="a">a1-child-div</div><div class="a">a2-child-div</div></div>';160      await page.setContent(htmlContent);161      const elementHandle = await page.$('#myId');162      const content = await elementHandle.$$eval('.a', nodes => nodes.map(n => n.innerText));163      expect(content).toEqual(['a1-child-div', 'a2-child-div']);164    });165    it('should not throw in case of missing selector', async() => {166      const {page} = getTestState();167      const htmlContent = '<div class="a">not-a-child-div</div><div id="myId"></div>';168      await page.setContent(htmlContent);169      const elementHandle = await page.$('#myId');170      const nodesLength = await elementHandle.$$eval('.a', nodes => nodes.length);171      expect(nodesLength).toBe(0);172    });173  });174  describeFailsFirefox('ElementHandle.$$', function() {175    it('should query existing elements', async() => {176      const {page} = getTestState();177      await page.setContent('<html><body><div>A</div><br/><div>B</div></body></html>');178      const html = await page.$('html');179      const elements = await html.$$('div');180      expect(elements.length).toBe(2);181      const promises = elements.map(element => page.evaluate(e => e.textContent, element));182      expect(await Promise.all(promises)).toEqual(['A', 'B']);183    });184    it('should return empty array for non-existing elements', async() => {185      const {page} = getTestState();186      await page.setContent('<html><body><span>A</span><br/><span>B</span></body></html>');187      const html = await page.$('html');188      const elements = await html.$$('div');189      expect(elements.length).toBe(0);190    });191  });192  describe('ElementHandle.$x', function() {193    it('should query existing element', async() => {194      const {page, server} = getTestState();195      await page.goto(server.PREFIX + '/playground.html');196      await page.setContent('<html><body><div class="second"><div class="inner">A</div></div></body></html>');197      const html = await page.$('html');198      const second = await html.$x(`./body/div[contains(@class, 'second')]`);199      const inner = await second[0].$x(`./div[contains(@class, 'inner')]`);200      const content = await page.evaluate(e => e.textContent, inner[0]);201      expect(content).toBe('A');202    });203    itFailsFirefox('should return null for non-existing element', async() => {204      const {page} = getTestState();205      await page.setContent('<html><body><div class="second"><div class="inner">B</div></div></body></html>');206      const html = await page.$('html');207      const second = await html.$x(`/div[contains(@class, 'third')]`);208      expect(second).toEqual([]);209    });210  });...

Using AI Code Generation

1const { launch } = require("qawolf");2const selectors = require("../selectors/test");3describe("test", () => {4  let browser;5  let page;6  beforeAll(async () => {7    browser = await launch();8    page = await browser.newPage();9    await page.setContent("Hello World!");10  });11  afterAll(() => browser.close());12  it("test", async () => {13    await page.click(selectors["input"]);14    await page.fill(selectors["input"], "Hello World!");15  });16});17module.exports = {18};19Error: Protocol error (Runtime.callFunctionOn): Cannot find context with specified id undefined20const { launch } = require("qawolf");21const selectors = require("../selectors/test");22describe("test", () => {23  let browser;24  let page;25  beforeAll(async () => {26    browser = await launch();27    page = await browser.newPage();28    await page.setContent("Hello World!");29  });30  afterAll(() => browser.close());31  it("test", async () => {32    await page.click(selectors["input"]);33    await page.fill(selectors["input"], "Hello World!");34  });35});36module.exports = {37};38Error: Protocol error (Runtime.callFunctionOn): Cannot find context with specified id undefined39const puppeteer = require('puppeteer');40(async () => {41    const browser = await puppeteer.launch({headless

Using AI Code Generation

1const { launch } = require("qawolf");2const selectors = require("./selectors/test.json");3describe("test", () => {4  let browser;5  let page;6  beforeAll(async () => {7    browser = await launch();8  });9  beforeEach(async () => {10    page = await browser.newPage();11  });12  afterAll(async () => {13    await browser.close();14  });15  it("test", async () => {16    await page.setContent(selectors[0]);17    await page.click(selectors[1]);18    await page.type(selectors[1], "test");19    await page.click(selectors[2]);20  });21});22  {23  },24  {25  },26  {27  }28const { launch } = require("qawolf");29const selectors = require("./selectors/test.json");30describe("test", () => {31  let browser;32  let page;33  beforeAll(async () => {34    browser = await launch();35  });36  beforeEach(async () => {37    page = await browser.newPage();38  });39  afterAll(async () => {40    await browser.close();41  });42  it("test", async () => {43    await page.setContent(selectors[0]);44    await page.click(selectors[1]);45    await page.type(selectors[1], "test");46    await page.click(selectors[2]);47  });48});

Using AI Code Generation

1const qawolf = require("qawolf");2const browser = await qawolf.launch();3const context = await browser.newContext();4const page = await context.newPage();5await page.setContent("<html><head></head><body><h1>Hello World</h1></body></html>");6await qawolf.stopVideos();7const { chromium } = require('playwright');8const browser = await chromium.launch();9const context = await browser.newContext();10const page = await context.newPage();11await page.setContent("<html><head></head><body><h1>Hello World</h1></body></html>");12await browser.close();13const puppeteer = require('puppeteer');14const browser = await puppeteer.launch();15const page = await browser.newPage();16await page.setContent("<html><head></head><body><h1>Hello World</h1></body></html>");17await browser.close();18const playwright = require('playwright');19const browser = await playwright['chromium'].launch();20const context = await browser.newContext();21const page = await context.newPage();22await page.setContent("<html><head></head><body><h1>Hello World</h1></body></html>");23await browser.close();24const playwright = require('playwright');25const browser = await playwright['webkit'].launch();26const context = await browser.newContext();27const page = await context.newPage();28await page.setContent("<html><head></head><body><h1>Hello World</h1></body></html>");29await browser.close();30const playwright = require('playwright');31const browser = await playwright['firefox'].launch();32const context = await browser.newContext();33const page = await context.newPage();34await page.setContent("<html><head></head><body><h1>Hello World</h1></body></html>");35await browser.close();36const playwright = require('playwright');37const browser = await playwright['chromium'].launch();38const context = await browser.newContext();39const page = await context.newPage();40await page.setContent("<html><head></head><body><h1>Hello World</h1></body></html>");41await browser.close();

Using AI Code Generation

1const qawolf = require("qawolf");2const selectors = require("./selectors.json");3const { chromium } = require('playwright-chromium');4(async () => {5  const browser = await chromium.launch();6  const context = await browser.newContext();7  const page = await context.newPage();8  await page.setContent('<html><body><div id="myDiv">Hello World</div></body></html>');9  await page.click(selectors["myDiv"]);10  await qawolf.stopVideos();11  await browser.close();12})();13{14}

Using AI Code Generation

1await page.setContent(html);2await page.setContent(html);3await page.setContent(html);4await page.setContent(html);5await page.setContent(html);6await page.setContent(html);7await page.setContent(html);8await page.setContent(html);9await page.setContent(html);10await page.setContent(html);11await page.setContent(html);12await page.setContent(html);13await page.setContent(html);14await page.setContent(html);15await page.setContent(html);16await page.setContent(html);17await page.setContent(html);

Using AI Code Generation

1const qawolf = require("qawolf");2const { chromium } = require("playwright");3const fs = require("fs");4const path = require("path");5const html = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf8');6(async () => {7  const browser = await chromium.launch();8  const context = await browser.newContext();9  const page = await context.newPage();10  await qawolf.register(page);11  await page.setContent(html);12  await qawolf.create();13  await browser.close();14})();15UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Protocol error (Page.navigate): Cannot navigate to invalid URL

Using AI Code Generation

1const qawolf = require("qawolf");2const selectors = require("./selectors/test.json");3describe("test", () => {4  let browser;5  let page;6  beforeAll(async () => {7    browser = await qawolf.launch();8  });9  afterAll(async () => {10    await browser.close();11  });12  beforeEach(async () => {13    page = await qawolf.createPage(browser);14  });15  afterEach(async () => {16    await qawolf.stopVideos();17    await page.close();18  });19  it("test", async () => {20    await page.waitForSelector(selectors["button"]);21    await page.click(selectors["button"]);22  });23});

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.