How to use onInteractionTraced method in Playwright Internal

Best JavaScript code snippet using playwright-internal

TracingSubscriptions-test.internal.js

Source:TracingSubscriptions-test.internal.js

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @jest-environment node8 */9'use strict';10describe('TracingSubscriptions', () => {11  let SchedulerTracing;12  let ReactFeatureFlags;13  let currentTime;14  let onInteractionScheduledWorkCompleted;15  let onInteractionTraced;16  let onWorkCanceled;17  let onWorkScheduled;18  let onWorkStarted;19  let onWorkStopped;20  let throwInOnInteractionScheduledWorkCompleted;21  let throwInOnInteractionTraced;22  let throwInOnWorkCanceled;23  let throwInOnWorkScheduled;24  let throwInOnWorkStarted;25  let throwInOnWorkStopped;26  let firstSubscriber;27  let secondSubscriber;28  const firstEvent = {id: 0, name: 'first', timestamp: 0};29  const secondEvent = {id: 1, name: 'second', timestamp: 0};30  const threadID = 123;31  function loadModules({enableSchedulerTracing, autoSubscribe = true}) {32    jest.resetModules();33    jest.useFakeTimers();34    currentTime = 0;35    ReactFeatureFlags = require('shared/ReactFeatureFlags');36    ReactFeatureFlags.enableSchedulerTracing = enableSchedulerTracing;37    SchedulerTracing = require('scheduler/tracing');38    throwInOnInteractionScheduledWorkCompleted = false;39    throwInOnInteractionTraced = false;40    throwInOnWorkCanceled = false;41    throwInOnWorkScheduled = false;42    throwInOnWorkStarted = false;43    throwInOnWorkStopped = false;44    onInteractionScheduledWorkCompleted = jest.fn(() => {45      if (throwInOnInteractionScheduledWorkCompleted) {46        throw Error('Expected error onInteractionScheduledWorkCompleted');47      }48    });49    onInteractionTraced = jest.fn(() => {50      if (throwInOnInteractionTraced) {51        throw Error('Expected error onInteractionTraced');52      }53    });54    onWorkCanceled = jest.fn(() => {55      if (throwInOnWorkCanceled) {56        throw Error('Expected error onWorkCanceled');57      }58    });59    onWorkScheduled = jest.fn(() => {60      if (throwInOnWorkScheduled) {61        throw Error('Expected error onWorkScheduled');62      }63    });64    onWorkStarted = jest.fn(() => {65      if (throwInOnWorkStarted) {66        throw Error('Expected error onWorkStarted');67      }68    });69    onWorkStopped = jest.fn(() => {70      if (throwInOnWorkStopped) {71        throw Error('Expected error onWorkStopped');72      }73    });74    firstSubscriber = {75      onInteractionScheduledWorkCompleted,76      onInteractionTraced,77      onWorkCanceled,78      onWorkScheduled,79      onWorkStarted,80      onWorkStopped,81    };82    secondSubscriber = {83      onInteractionScheduledWorkCompleted: jest.fn(),84      onInteractionTraced: jest.fn(),85      onWorkCanceled: jest.fn(),86      onWorkScheduled: jest.fn(),87      onWorkStarted: jest.fn(),88      onWorkStopped: jest.fn(),89    };90    if (autoSubscribe) {91      SchedulerTracing.unstable_subscribe(firstSubscriber);92      SchedulerTracing.unstable_subscribe(secondSubscriber);93    }94  }95  describe('enabled', () => {96    beforeEach(() => loadModules({enableSchedulerTracing: true}));97    it('should lazily subscribe to tracing and unsubscribe again if there are no external subscribers', () => {98      loadModules({enableSchedulerTracing: true, autoSubscribe: false});99      expect(SchedulerTracing.__subscriberRef.current).toBe(null);100      SchedulerTracing.unstable_subscribe(firstSubscriber);101      expect(SchedulerTracing.__subscriberRef.current).toBeDefined();102      SchedulerTracing.unstable_subscribe(secondSubscriber);103      expect(SchedulerTracing.__subscriberRef.current).toBeDefined();104      SchedulerTracing.unstable_unsubscribe(secondSubscriber);105      expect(SchedulerTracing.__subscriberRef.current).toBeDefined();106      SchedulerTracing.unstable_unsubscribe(firstSubscriber);107      expect(SchedulerTracing.__subscriberRef.current).toBe(null);108    });109    describe('error handling', () => {110      it('should cover onInteractionTraced/onWorkStarted within', done => {111        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {112          const mock = jest.fn();113          // It should call the callback before re-throwing114          throwInOnInteractionTraced = true;115          expect(() =>116            SchedulerTracing.unstable_trace(117              secondEvent.name,118              currentTime,119              mock,120              threadID,121            ),122          ).toThrow('Expected error onInteractionTraced');123          throwInOnInteractionTraced = false;124          expect(mock).toHaveBeenCalledTimes(1);125          throwInOnWorkStarted = true;126          expect(() =>127            SchedulerTracing.unstable_trace(128              secondEvent.name,129              currentTime,130              mock,131              threadID,132            ),133          ).toThrow('Expected error onWorkStarted');134          expect(mock).toHaveBeenCalledTimes(2);135          // It should restore the previous/outer interactions136          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([137            firstEvent,138          ]);139          // It should call other subscribers despite the earlier error140          expect(secondSubscriber.onInteractionTraced).toHaveBeenCalledTimes(3);141          expect(secondSubscriber.onWorkStarted).toHaveBeenCalledTimes(3);142          done();143        });144      });145      it('should cover onWorkStopped within trace', done => {146        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {147          let innerInteraction;148          const mock = jest.fn(() => {149            innerInteraction = Array.from(150              SchedulerTracing.unstable_getCurrent(),151            )[1];152          });153          throwInOnWorkStopped = true;154          expect(() =>155            SchedulerTracing.unstable_trace(156              secondEvent.name,157              currentTime,158              mock,159            ),160          ).toThrow('Expected error onWorkStopped');161          throwInOnWorkStopped = false;162          // It should restore the previous/outer interactions163          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([164            firstEvent,165          ]);166          // It should update the interaction count so as not to interfere with subsequent calls167          expect(innerInteraction.__count).toBe(0);168          // It should call other subscribers despite the earlier error169          expect(secondSubscriber.onWorkStopped).toHaveBeenCalledTimes(1);170          done();171        });172      });173      it('should cover onInteractionScheduledWorkCompleted within trace', done => {174        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {175          const mock = jest.fn();176          throwInOnInteractionScheduledWorkCompleted = true;177          expect(() =>178            SchedulerTracing.unstable_trace(179              secondEvent.name,180              currentTime,181              mock,182            ),183          ).toThrow('Expected error onInteractionScheduledWorkCompleted');184          throwInOnInteractionScheduledWorkCompleted = false;185          // It should restore the previous/outer interactions186          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([187            firstEvent,188          ]);189          // It should call other subscribers despite the earlier error190          expect(191            secondSubscriber.onInteractionScheduledWorkCompleted,192          ).toHaveBeenCalledTimes(1);193          done();194        });195      });196      it('should cover the callback within trace', done => {197        expect(onWorkStarted).not.toHaveBeenCalled();198        expect(onWorkStopped).not.toHaveBeenCalled();199        expect(() => {200          SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {201            throw Error('Expected error callback');202          });203        }).toThrow('Expected error callback');204        expect(onWorkStarted).toHaveBeenCalledTimes(1);205        expect(onWorkStopped).toHaveBeenCalledTimes(1);206        done();207      });208      it('should cover onWorkScheduled within wrap', done => {209        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {210          const interaction = Array.from(211            SchedulerTracing.unstable_getCurrent(),212          )[0];213          const beforeCount = interaction.__count;214          throwInOnWorkScheduled = true;215          expect(() => SchedulerTracing.unstable_wrap(() => {})).toThrow(216            'Expected error onWorkScheduled',217          );218          // It should not update the interaction count so as not to interfere with subsequent calls219          expect(interaction.__count).toBe(beforeCount);220          // It should call other subscribers despite the earlier error221          expect(secondSubscriber.onWorkScheduled).toHaveBeenCalledTimes(1);222          done();223        });224      });225      it('should cover onWorkStarted within wrap', () => {226        const mock = jest.fn();227        let interaction, wrapped;228        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {229          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];230          wrapped = SchedulerTracing.unstable_wrap(mock);231        });232        expect(interaction.__count).toBe(1);233        throwInOnWorkStarted = true;234        expect(wrapped).toThrow('Expected error onWorkStarted');235        // It should call the callback before re-throwing236        expect(mock).toHaveBeenCalledTimes(1);237        // It should update the interaction count so as not to interfere with subsequent calls238        expect(interaction.__count).toBe(0);239        // It should call other subscribers despite the earlier error240        expect(secondSubscriber.onWorkStarted).toHaveBeenCalledTimes(2);241      });242      it('should cover onWorkStopped within wrap', done => {243        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {244          const outerInteraction = Array.from(245            SchedulerTracing.unstable_getCurrent(),246          )[0];247          expect(outerInteraction.__count).toBe(1);248          let wrapped;249          let innerInteraction;250          SchedulerTracing.unstable_trace(secondEvent.name, currentTime, () => {251            innerInteraction = Array.from(252              SchedulerTracing.unstable_getCurrent(),253            )[1];254            expect(outerInteraction.__count).toBe(1);255            expect(innerInteraction.__count).toBe(1);256            wrapped = SchedulerTracing.unstable_wrap(jest.fn());257            expect(outerInteraction.__count).toBe(2);258            expect(innerInteraction.__count).toBe(2);259          });260          expect(outerInteraction.__count).toBe(2);261          expect(innerInteraction.__count).toBe(1);262          throwInOnWorkStopped = true;263          expect(wrapped).toThrow('Expected error onWorkStopped');264          throwInOnWorkStopped = false;265          // It should restore the previous interactions266          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([267            outerInteraction,268          ]);269          // It should update the interaction count so as not to interfere with subsequent calls270          expect(outerInteraction.__count).toBe(1);271          expect(innerInteraction.__count).toBe(0);272          expect(secondSubscriber.onWorkStopped).toHaveBeenCalledTimes(2);273          done();274        });275      });276      it('should cover the callback within wrap', done => {277        expect(onWorkStarted).not.toHaveBeenCalled();278        expect(onWorkStopped).not.toHaveBeenCalled();279        let wrapped;280        let interaction;281        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {282          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];283          wrapped = SchedulerTracing.unstable_wrap(() => {284            throw Error('Expected error wrap');285          });286        });287        expect(onWorkStarted).toHaveBeenCalledTimes(1);288        expect(onWorkStopped).toHaveBeenCalledTimes(1);289        expect(wrapped).toThrow('Expected error wrap');290        expect(onWorkStarted).toHaveBeenCalledTimes(2);291        expect(onWorkStopped).toHaveBeenCalledTimes(2);292        expect(onWorkStopped).toHaveBeenLastNotifiedOfWork([interaction]);293        done();294      });295      it('should cover onWorkCanceled within wrap', () => {296        let interaction, wrapped;297        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {298          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];299          wrapped = SchedulerTracing.unstable_wrap(jest.fn());300        });301        expect(interaction.__count).toBe(1);302        throwInOnWorkCanceled = true;303        expect(wrapped.cancel).toThrow('Expected error onWorkCanceled');304        expect(onWorkCanceled).toHaveBeenCalledTimes(1);305        // It should update the interaction count so as not to interfere with subsequent calls306        expect(interaction.__count).toBe(0);307        expect(308          onInteractionScheduledWorkCompleted,309        ).toHaveBeenLastNotifiedOfInteraction(firstEvent);310        // It should call other subscribers despite the earlier error311        expect(secondSubscriber.onWorkCanceled).toHaveBeenCalledTimes(1);312      });313    });314    it('calls lifecycle methods for trace', () => {315      expect(onInteractionTraced).not.toHaveBeenCalled();316      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();317      SchedulerTracing.unstable_trace(318        firstEvent.name,319        currentTime,320        () => {321          expect(onInteractionTraced).toHaveBeenCalledTimes(1);322          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(323            firstEvent,324          );325          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();326          expect(onWorkStarted).toHaveBeenCalledTimes(1);327          expect(onWorkStarted).toHaveBeenLastNotifiedOfWork(328            new Set([firstEvent]),329            threadID,330          );331          expect(onWorkStopped).not.toHaveBeenCalled();332          SchedulerTracing.unstable_trace(333            secondEvent.name,334            currentTime,335            () => {336              expect(onInteractionTraced).toHaveBeenCalledTimes(2);337              expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(338                secondEvent,339              );340              expect(341                onInteractionScheduledWorkCompleted,342              ).not.toHaveBeenCalled();343              expect(onWorkStarted).toHaveBeenCalledTimes(2);344              expect(onWorkStarted).toHaveBeenLastNotifiedOfWork(345                new Set([firstEvent, secondEvent]),346                threadID,347              );348              expect(onWorkStopped).not.toHaveBeenCalled();349            },350            threadID,351          );352          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);353          expect(354            onInteractionScheduledWorkCompleted,355          ).toHaveBeenLastNotifiedOfInteraction(secondEvent);356          expect(onWorkStopped).toHaveBeenCalledTimes(1);357          expect(onWorkStopped).toHaveBeenLastNotifiedOfWork(358            new Set([firstEvent, secondEvent]),359            threadID,360          );361        },362        threadID,363      );364      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);365      expect(366        onInteractionScheduledWorkCompleted,367      ).toHaveBeenLastNotifiedOfInteraction(firstEvent);368      expect(onWorkScheduled).not.toHaveBeenCalled();369      expect(onWorkCanceled).not.toHaveBeenCalled();370      expect(onWorkStarted).toHaveBeenCalledTimes(2);371      expect(onWorkStopped).toHaveBeenCalledTimes(2);372      expect(onWorkStopped).toHaveBeenLastNotifiedOfWork(373        new Set([firstEvent]),374        threadID,375      );376    });377    it('calls lifecycle methods for wrap', () => {378      const unwrapped = jest.fn();379      let wrapped;380      SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {381        expect(onInteractionTraced).toHaveBeenCalledTimes(1);382        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(383          firstEvent,384        );385        SchedulerTracing.unstable_trace(secondEvent.name, currentTime, () => {386          expect(onInteractionTraced).toHaveBeenCalledTimes(2);387          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(388            secondEvent,389          );390          wrapped = SchedulerTracing.unstable_wrap(unwrapped, threadID);391          expect(onWorkScheduled).toHaveBeenCalledTimes(1);392          expect(onWorkScheduled).toHaveBeenLastNotifiedOfWork(393            new Set([firstEvent, secondEvent]),394            threadID,395          );396        });397      });398      expect(onInteractionTraced).toHaveBeenCalledTimes(2);399      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();400      wrapped();401      expect(unwrapped).toHaveBeenCalled();402      expect(onWorkScheduled).toHaveBeenCalledTimes(1);403      expect(onWorkCanceled).not.toHaveBeenCalled();404      expect(onWorkStarted).toHaveBeenCalledTimes(3);405      expect(onWorkStarted).toHaveBeenLastNotifiedOfWork(406        new Set([firstEvent, secondEvent]),407        threadID,408      );409      expect(onWorkStopped).toHaveBeenCalledTimes(3);410      expect(onWorkStopped).toHaveBeenLastNotifiedOfWork(411        new Set([firstEvent, secondEvent]),412        threadID,413      );414      expect(415        onInteractionScheduledWorkCompleted.mock.calls[0][0],416      ).toMatchInteraction(firstEvent);417      expect(418        onInteractionScheduledWorkCompleted.mock.calls[1][0],419      ).toMatchInteraction(secondEvent);420    });421    it('should call the correct interaction subscriber methods when a wrapped callback is canceled', () => {422      const fnOne = jest.fn();423      const fnTwo = jest.fn();424      let wrappedOne, wrappedTwo;425      SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {426        wrappedOne = SchedulerTracing.unstable_wrap(fnOne, threadID);427        SchedulerTracing.unstable_trace(secondEvent.name, currentTime, () => {428          wrappedTwo = SchedulerTracing.unstable_wrap(fnTwo, threadID);429        });430      });431      expect(onInteractionTraced).toHaveBeenCalledTimes(2);432      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();433      expect(onWorkCanceled).not.toHaveBeenCalled();434      expect(onWorkStarted).toHaveBeenCalledTimes(2);435      expect(onWorkStopped).toHaveBeenCalledTimes(2);436      wrappedTwo.cancel();437      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);438      expect(439        onInteractionScheduledWorkCompleted,440      ).toHaveBeenLastNotifiedOfInteraction(secondEvent);441      expect(onWorkCanceled).toHaveBeenCalledTimes(1);442      expect(onWorkCanceled).toHaveBeenLastNotifiedOfWork(443        new Set([firstEvent, secondEvent]),444        threadID,445      );446      wrappedOne.cancel();447      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);448      expect(449        onInteractionScheduledWorkCompleted,450      ).toHaveBeenLastNotifiedOfInteraction(firstEvent);451      expect(onWorkCanceled).toHaveBeenCalledTimes(2);452      expect(onWorkCanceled).toHaveBeenLastNotifiedOfWork(453        new Set([firstEvent]),454        threadID,455      );456      expect(fnOne).not.toHaveBeenCalled();457      expect(fnTwo).not.toHaveBeenCalled();458    });459    it('should not end an interaction twice if wrap is used to schedule follow up work within another wrap', () => {460      const fnOne = jest.fn(() => {461        wrappedTwo = SchedulerTracing.unstable_wrap(fnTwo, threadID);462      });463      const fnTwo = jest.fn();464      let wrappedOne, wrappedTwo;465      SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {466        wrappedOne = SchedulerTracing.unstable_wrap(fnOne, threadID);467      });468      expect(onInteractionTraced).toHaveBeenCalledTimes(1);469      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();470      wrappedOne();471      expect(onInteractionTraced).toHaveBeenCalledTimes(1);472      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();473      wrappedTwo();474      expect(onInteractionTraced).toHaveBeenCalledTimes(1);475      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);476      expect(477        onInteractionScheduledWorkCompleted,478      ).toHaveBeenLastNotifiedOfInteraction(firstEvent);479    });480    it('should not decrement the interaction count twice if a wrapped function is run twice', () => {481      const unwrappedOne = jest.fn();482      const unwrappedTwo = jest.fn();483      let wrappedOne, wrappedTwo;484      SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {485        wrappedOne = SchedulerTracing.unstable_wrap(unwrappedOne, threadID);486        wrappedTwo = SchedulerTracing.unstable_wrap(unwrappedTwo, threadID);487      });488      expect(onInteractionTraced).toHaveBeenCalledTimes(1);489      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();490      wrappedOne();491      expect(unwrappedOne).toHaveBeenCalledTimes(1);492      expect(onInteractionTraced).toHaveBeenCalledTimes(1);493      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();494      wrappedOne();495      expect(unwrappedOne).toHaveBeenCalledTimes(2);496      expect(onInteractionTraced).toHaveBeenCalledTimes(1);497      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();498      wrappedTwo();499      expect(onInteractionTraced).toHaveBeenCalledTimes(1);500      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);501      expect(502        onInteractionScheduledWorkCompleted,503      ).toHaveBeenLastNotifiedOfInteraction(firstEvent);504    });505    it('should unsubscribe', () => {506      SchedulerTracing.unstable_unsubscribe(firstSubscriber);507      SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {});508      expect(onInteractionTraced).not.toHaveBeenCalled();509    });510  });511  describe('disabled', () => {512    beforeEach(() => loadModules({enableSchedulerTracing: false}));513    // TODO514  });...

ReactProfilerDOM-test.internal.js

Source:ReactProfilerDOM-test.internal.js

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @emails react-core8 */9'use strict';10let React;11let ReactFeatureFlags;12let ReactDOM;13let SchedulerTracing;14let Scheduler;15function loadModules() {16  ReactFeatureFlags = require('shared/ReactFeatureFlags');17  ReactFeatureFlags.enableProfilerTimer = true;18  ReactFeatureFlags.enableSchedulerTracing = true;19  React = require('react');20  SchedulerTracing = require('scheduler/tracing');21  ReactDOM = require('react-dom');22  Scheduler = require('scheduler');23}24describe('ProfilerDOM', () => {25  let onInteractionScheduledWorkCompleted;26  let onInteractionTraced;27  beforeEach(() => {28    loadModules();29    onInteractionScheduledWorkCompleted = jest.fn();30    onInteractionTraced = jest.fn();31    // Verify interaction subscriber methods are called as expected.32    SchedulerTracing.unstable_subscribe({33      onInteractionScheduledWorkCompleted,34      onInteractionTraced,35      onWorkCanceled: () => {},36      onWorkScheduled: () => {},37      onWorkStarted: () => {},38      onWorkStopped: () => {},39    });40  });41  function Text(props) {42    Scheduler.unstable_yieldValue(props.text);43    return props.text;44  }45  // @gate experimental46  it('should correctly trace interactions for async roots', async () => {47    let resolve;48    let thenable = {49      then(res) {50        resolve = () => {51          thenable = null;52          res();53        };54      },55    };56    function Async() {57      if (thenable !== null) {58        Scheduler.unstable_yieldValue('Suspend! [Async]');59        throw thenable;60      }61      Scheduler.unstable_yieldValue('Async');62      return 'Async';63    }64    const element = document.createElement('div');65    const root = ReactDOM.createRoot(element);66    let interaction;67    let wrappedResolve;68    SchedulerTracing.unstable_trace('initial_event', performance.now(), () => {69      const interactions = SchedulerTracing.unstable_getCurrent();70      expect(interactions.size).toBe(1);71      interaction = Array.from(interactions)[0];72      root.render(73        <React.Suspense fallback={<Text text="Loading..." />}>74          <Async />75        </React.Suspense>,76      );77      wrappedResolve = SchedulerTracing.unstable_wrap(() => resolve());78    });79    // Render, suspend, and commit fallback80    expect(Scheduler).toFlushAndYield(['Suspend! [Async]', 'Loading...']);81    expect(element.textContent).toEqual('Loading...');82    expect(onInteractionTraced).toHaveBeenCalledTimes(1);83    expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(84      interaction,85    );86    expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();87    // Ping React to try rendering again88    wrappedResolve();89    // Complete the tree without committing it90    expect(Scheduler).toFlushAndYieldThrough(['Async']);91    // Still showing the fallback92    expect(element.textContent).toEqual('Loading...');93    expect(onInteractionTraced).toHaveBeenCalledTimes(1);94    expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(95      interaction,96    );97    expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();98    expect(Scheduler).toFlushAndYield([]);99    expect(element.textContent).toEqual('Async');100    expect(onInteractionTraced).toHaveBeenCalledTimes(1);101    expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(102      interaction,103    );104    expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);105  });...

Using AI Code Generation

1const playwright = require('playwright');2(async () => {3  const browser = await playwright.chromium.launch({ headless: false });4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.click('text=Get started');7  await browser.close();8})();9const playwright = require('playwright');10(async () => {11  const browser = await playwright.chromium.launch({ headless: false });12  const context = await browser.newContext();13  const page = await context.newPage();14  await page.click('text=Get started');15  await browser.close();16})();17const playwright = require('playwright');18(async () => {19  const browser = await playwright.chromium.launch({ headless: false });20  const context = await browser.newContext();21  const page = await context.newPage();22  await page.click('text=Get started');23  await browser.close();24})();25const playwright = require('playwright');26(async () => {27  const browser = await playwright.chromium.launch({ headless: false });28  const context = await browser.newContext();29  const page = await context.newPage();30  await page.click('text=Get started');31  await browser.close();32})();33const playwright = require('playwright');34(async () => {35  const browser = await playwright.chromium.launch({ headless: false });36  const context = await browser.newContext();37  const page = await context.newPage();38  await page.click('text=Get started');39  await browser.close();40})();41const playwright = require('playwright');42(async () => {43  const browser = await playwright.chromium.launch({ headless: false });44  const context = await browser.newContext();45  const page = await context.newPage();46  await page.click('text

Using AI Code Generation

1const playwright = require('playwright');2(async () => {3  const browser = await playwright.chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.tracing.start({ screenshots: true, snapshots: true });7  await page.tracing.stop({ path: 'trace.zip' });8  await browser.close();9})();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch({4  });5  const context = await browser.newContext();6  const page = await context.newPage();7  await page.screenshot({ path: `example.png` });8  await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12  const browser = await chromium.launch({13  });14  const context = await browser.newContext();15  const page = await context.newPage();16  await page.screenshot({ path: `example.png` });17  await browser.close();18})();19    at CDPSession.send (C:\Users\kajal\Desktop\Playwright\playwright\lib\protocol\connection.js:193:15)20    at CDPSession.send (C:\Users\kajal\Desktop\Playwright\playwright\lib\protocol\connection.js:196:19)21    at ExecutionContext._evaluateInternal (C:\Users\kajal\Desktop\Playwright\playwright\lib\dom.js:94:29)22    at ExecutionContext.evaluate (C:\Users\kajal\Desktop\Playwright\playwright\lib\dom.js:20:17)23    at ExecutionContext.evaluate (C:\Users\kajal\Desktop\Playwright\playwright\lib\dom.js:26:15)24    at Page.evaluate (C:\Users\kajal\Desktop\Playwright\playwright\lib\dom.js:140:33)25    at Page.evaluate (C:\Users\kajal\Desktop\Playwright\playwright\lib\dom.js:146:15)26    at Page._runAbortableTask (C:\Users\kajal\Desktop\Playwright\playwright\lib\page.js:229:12)27    at Page.screenshot (C:\Users\kajal\Desktop

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.route('**/*', route => {7    console.log(route.request().url());8    route.continue();9  });10  await browser.close();11})();

Using AI Code Generation

1const { Playwright } = require('playwright');2const playwright = new Playwright();3const browser = await playwright.chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6const trace = await page.startTracing(page, 'trace.json');7await page.setContent('<html><body><div>Hi</div></body></html>');8await page.click('div');9await trace.stop();10await browser.close();11const { Playwright } = require('playwright');12const playwright = new Playwright();13const browser = await playwright.chromium.launch();14const context = await browser.newContext();15const page = await context.newPage();16const trace = await page.startTracing(page, 'trace.json');17await page.setContent('<html><body><div>Hi</div></body></html>');18await page.click('div');19await trace.stop();20await browser.close();21const { Playwright } = require('playwright');22const playwright = new Playwright();23const browser = await playwright.chromium.launch();24const context = await browser.newContext();25const page = await context.newPage();26const trace = await page.startTracing(page, 'trace.json');27await page.setContent('<html><body><div>Hi</div></body></html>');28await page.click('div');29await trace.stop();30await browser.close();31const { Playwright } = require('playwright');32const playwright = new Playwright();33const browser = await playwright.chromium.launch();34const context = await browser.newContext();35const page = await context.newPage();36const trace = await page.startTracing(page, 'trace.json');37await page.setContent('<html><body><div>Hi</div></body></html>');38await page.click('div');39await trace.stop();40await browser.close();41const { Playwright } = require('playwright');42const playwright = new Playwright();43const browser = await playwright.chromium.launch();44const context = await browser.newContext();

Using AI Code Generation

1import { test, expect } from "@playwright/test";2import { PlaywrightTestConfig } from "@playwright/test/types/test";3import { PlaywrightTestArgs } from "@playwright/test/types/args";4import { PlaywrightTestOptions } from "@playwright/test/types/options";5import { PlaywrightTestArgsInternal } from "@playwright/test/types/testArgs";6import { PlaywrightTestOptionsInternal } from "@playwright/test/types/testOptions";7import { PlaywrightTestConfigInternal } from "@playwright/test/types/testConfig";8import { PlaywrightTestOptions } from "@playwright/test/types/options";9import { PlaywrightTestArgs } from "@playwright/test/types/args";10import { PlaywrightTestConfig } from "@playwright/test/types/test";11import { PlaywrightTestOptionsInternal } from "@playwright/test/types/testOptions";12import { PlaywrightTestArgsInternal } from "@playwright/test/types/testArgs";13import { PlaywrightTestConfigInternal } from "@playwright/test/types/testConfig";14import { PlaywrightTestOptions } from "@playwright/test/types/options";15import { PlaywrightTestArgs } from "@playwright/test/types/args";16import { PlaywrightTestConfig } from "@playwright/test/types/test";17import { PlaywrightTestOptionsInternal } from "@playwright/test/types/testOptions";18import { PlaywrightTestArgsInternal } from "@playwright/test/types/testArgs";19import { PlaywrightTestConfigInternal } from "@playwright/test/types/testConfig";20import { PlaywrightTestOptions } from "@playwright/test/types/options";21import { PlaywrightTestArgs } from "@playwright/test/types/args";22import { PlaywrightTestConfig } from "@playwright/test/types/test";23import { PlaywrightTestOptionsInternal } from "@playwright/test/types/testOptions";24import { PlaywrightTestArgsInternal } from "@playwright/test/types/testArgs";25import { PlaywrightTestConfigInternal } from "@playwright/test/types/testConfig";26import { PlaywrightTestOptions } from "@playwright/test/types/options";27import { PlaywrightTestArgs } from "@playwright/test/types/args";28import { PlaywrightTestConfig } from "@playwright/test/types/test";29import { PlaywrightTestOptionsInternal } from "@playwright/test/types/testOptions";30import { PlaywrightTestArgsInternal } from "@playwright/test/types/testArgs";31import { PlaywrightTestConfigInternal } from "@playwright/test/types/testConfig";

Using AI Code Generation

1const playwright = require('playwright');2const fs = require('fs');3const path = require('path');4(async () => {5  const browser = await playwright.chromium.launch({6  });7  const context = await browser.newContext();8  const page = await context.newPage();9  page.on('framenavigated', (frame) => {10    console.log(frame.url());11  });12  const tracePath = path.join(__dirname, 'trace.json');13  const traceStream = fs.createWriteStream(tracePath);14  await page.tracing.start({ screenshots: true, snapshots: true });15  await page.tracing.stop();16  const trace = await page.evaluate(() => JSON.stringify(window.__playwrightTracerEvents));17  traceStream.write(trace);18  traceStream.end();19  await browser.close();20})();21{22    {23      "args": {24        "data": {25        }26      }27    },28    {29      "args": {30        "data": {31        }32      }33    },34    {35      "args": {36        "data": {37        }38      }39    },40    {

Using AI Code Generation

1const { interactionTracer } = require('playwright');2const { trace } = require('playwright/lib/internal/trace/recorder/trace');3const traceEvents = [];4interactionTracer.onInteractionTraced(trace => {5  traceEvents.push(trace);6});7const { interactionTracer } = require('playwright');8const { trace } = require('playwright/lib/internal/trace/recorder/trace');9const traceEvents = [];10interactionTracer.onInteractionTraced(trace => {11  traceEvents.push(trace);12});13const { interactionTracer } = require('playwright');14const { trace } = require('playwright/lib/internal/trace/recorder/trace');15const traceEvents = [];16interactionTracer.onInteractionTraced(trace => {17  traceEvents.push(trace);18});19const { interactionTracer } = require('playwright');20const { trace } = require('playwright/lib/internal/trace/recorder/trace');21const traceEvents = [];22interactionTracer.onInteractionTraced(trace => {23  traceEvents.push(trace);24});25const { interactionTracer } = require('playwright');26const { trace } = require('playwright/lib/internal/trace/recorder/trace');27const traceEvents = [];28interactionTracer.onInteractionTraced(trace => {29  traceEvents.push(trace);30});31const { interactionTracer } = require('playwright');32const { trace } = require('playwright/lib/internal/trace/recorder/trace');33const traceEvents = [];34interactionTracer.onInteractionTraced(trace => {35  traceEvents.push(trace);36});37const { interactionTracer } = require('playwright');38const { trace } = require('playwright/lib/internal/trace/recorder/trace');39const traceEvents = [];40interactionTracer.onInteractionTraced(trace => {41  traceEvents.push(trace);42});43const { interactionTracer } = require('playwright');44const { trace } = require('playwright/lib/internal/trace/recorder/

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.