How to use markRootSuspendedAtTime method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ReactFiberWorkLoop.js

Source:ReactFiberWorkLoop.js

...471        // TODO: This does not account for low pri updates that were already472        // scheduled before the root started rendering. Need to track the next473        // pending expiration time (perhaps by backtracking the return path) and474        // then trigger a restart in the `renderDidSuspendDelayIfPossible` path.475        markRootSuspendedAtTime(root, renderExpirationTime);476      }477    }478    // Mark that the root has a pending update.479    markRootUpdatedAtTime(root, expirationTime);480  }481  return root;482}483function getNextRootExpirationTimeToWorkOn(root: FiberRoot): ExpirationTime {484  // Determines the next expiration time that the root should render, taking485  // into account levels that may be suspended, or levels that may have486  // received a ping.487  const lastExpiredTime = root.lastExpiredTime;488  if (lastExpiredTime !== NoWork) {489    return lastExpiredTime;490  }491  // "Pending" refers to any update that hasn't committed yet, including if it492  // suspended. The "suspended" range is therefore a subset.493  const firstPendingTime = root.firstPendingTime;494  if (!isRootSuspendedAtTime(root, firstPendingTime)) {495    // The highest priority pending time is not suspended. Let's work on that.496    return firstPendingTime;497  }498  // If the first pending time is suspended, check if there's a lower priority499  // pending level that we know about. Or check if we received a ping. Work500  // on whichever is higher priority.501  const lastPingedTime = root.lastPingedTime;502  const nextKnownPendingLevel = root.nextKnownPendingLevel;503  return lastPingedTime > nextKnownPendingLevel504    ? lastPingedTime505    : nextKnownPendingLevel;506}507// Use this function to schedule a task for a root. There's only one task per508// root; if a task was already scheduled, we'll check to make sure the509// expiration time of the existing task is the same as the expiration time of510// the next level that the root has work on. This function is called on every511// update, and right before exiting a task.512function ensureRootIsScheduled(root: FiberRoot) {513  const lastExpiredTime = root.lastExpiredTime;514  if (lastExpiredTime !== NoWork) {515    // Special case: Expired work should flush synchronously.516    root.callbackExpirationTime = Sync;517    root.callbackPriority = ImmediatePriority;518    root.callbackNode = scheduleSyncCallback(519      performSyncWorkOnRoot.bind(null, root),520    );521    return;522  }523  const expirationTime = getNextRootExpirationTimeToWorkOn(root);524  const existingCallbackNode = root.callbackNode;525  if (expirationTime === NoWork) {526    // There's nothing to work on.527    if (existingCallbackNode !== null) {528      root.callbackNode = null;529      root.callbackExpirationTime = NoWork;530      root.callbackPriority = NoPriority;531    }532    return;533  }534  // TODO: If this is an update, we already read the current time. Pass the535  // time as an argument.536  const currentTime = requestCurrentTime();537  const priorityLevel = inferPriorityFromExpirationTime(538    currentTime,539    expirationTime,540  );541  // If there's an existing render task, confirm it has the correct priority and542  // expiration time. Otherwise, we'll cancel it and schedule a new one.543  if (existingCallbackNode !== null) {544    const existingCallbackPriority = root.callbackPriority;545    const existingCallbackExpirationTime = root.callbackExpirationTime;546    if (547      // Callback must have the exact same expiration time.548      existingCallbackExpirationTime === expirationTime &&549      // Callback must have greater or equal priority.550      existingCallbackPriority >= priorityLevel551    ) {552      // Existing callback is sufficient.553      return;554    }555    // Need to schedule a new task.556    // TODO: Instead of scheduling a new task, we should be able to change the557    // priority of the existing one.558    cancelCallback(existingCallbackNode);559  }560  root.callbackExpirationTime = expirationTime;561  root.callbackPriority = priorityLevel;562  let callbackNode;563  if (expirationTime === Sync) {564    // Sync React callbacks are scheduled on a special internal queue565    callbackNode = scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));566  } else if (disableSchedulerTimeoutBasedOnReactExpirationTime) {567    callbackNode = scheduleCallback(568      priorityLevel,569      performConcurrentWorkOnRoot.bind(null, root),570    );571  } else {572    callbackNode = scheduleCallback(573      priorityLevel,574      performConcurrentWorkOnRoot.bind(null, root),575      // Compute a task timeout based on the expiration time. This also affects576      // ordering because tasks are processed in timeout order.577      {timeout: expirationTimeToMs(expirationTime) - now()},578    );579  }580  root.callbackNode = callbackNode;581}582// This is the entry point for every concurrent task, i.e. anything that583// goes through Scheduler.584function performConcurrentWorkOnRoot(root, didTimeout) {585  // Since we know we're in a React event, we can clear the current586  // event time. The next update will compute a new event time.587  currentEventTime = NoWork;588  if (didTimeout) {589    // The render task took too long to complete. Mark the current time as590    // expired to synchronously render all expired work in a single batch.591    const currentTime = requestCurrentTime();592    markRootExpiredAtTime(root, currentTime);593    // This will schedule a synchronous callback.594    ensureRootIsScheduled(root);595    return null;596  }597  // Determine the next expiration time to work on, using the fields stored598  // on the root.599  const expirationTime = getNextRootExpirationTimeToWorkOn(root);600  if (expirationTime !== NoWork) {601    const originalCallbackNode = root.callbackNode;602    invariant(603      (executionContext & (RenderContext | CommitContext)) === NoContext,604      'Should not already be working.',605    );606    flushPassiveEffects();607    // If the root or expiration time have changed, throw out the existing stack608    // and prepare a fresh one. Otherwise we'll continue where we left off.609    if (610      root !== workInProgressRoot ||611      expirationTime !== renderExpirationTime612    ) {613      prepareFreshStack(root, expirationTime);614      startWorkOnPendingInteractions(root, expirationTime);615    }616    // If we have a work-in-progress fiber, it means there's still work to do617    // in this root.618    if (workInProgress !== null) {619      const prevExecutionContext = executionContext;620      executionContext |= RenderContext;621      const prevDispatcher = pushDispatcher(root);622      const prevInteractions = pushInteractions(root);623      startWorkLoopTimer(workInProgress);624      do {625        try {626          workLoopConcurrent();627          break;628        } catch (thrownValue) {629          handleError(root, thrownValue);630        }631      } while (true);632      resetContextDependencies();633      executionContext = prevExecutionContext;634      popDispatcher(prevDispatcher);635      if (enableSchedulerTracing) {636        popInteractions(((prevInteractions: any): Set<Interaction>));637      }638      if (workInProgressRootExitStatus === RootFatalErrored) {639        const fatalError = workInProgressRootFatalError;640        stopInterruptedWorkLoopTimer();641        prepareFreshStack(root, expirationTime);642        markRootSuspendedAtTime(root, expirationTime);643        ensureRootIsScheduled(root);644        throw fatalError;645      }646      if (workInProgress !== null) {647        // There's still work left over. Exit without committing.648        stopInterruptedWorkLoopTimer();649      } else {650        // We now have a consistent tree. The next step is either to commit it,651        // or, if something suspended, wait to commit it after a timeout.652        stopFinishedWorkLoopTimer();653        const finishedWork: Fiber = ((root.finishedWork =654          root.current.alternate): any);655        root.finishedExpirationTime = expirationTime;656        resolveLocksOnRoot(root, expirationTime);657        finishConcurrentRender(658          root,659          finishedWork,660          workInProgressRootExitStatus,661          expirationTime,662        );663      }664      ensureRootIsScheduled(root);665      if (root.callbackNode === originalCallbackNode) {666        // The task node scheduled for this root is the same one that's667        // currently executed. Need to return a continuation.668        return performConcurrentWorkOnRoot.bind(null, root);669      }670    }671  }672  return null;673}674function finishConcurrentRender(675  root,676  finishedWork,677  exitStatus,678  expirationTime,679) {680  // Set this to null to indicate there's no in-progress render.681  workInProgressRoot = null;682  switch (exitStatus) {683    case RootIncomplete:684    case RootFatalErrored: {685      invariant(false, 'Root did not complete. This is a bug in React.');686    }687    // Flow knows about invariant, so it complains if I add a break688    // statement, but eslint doesn't know about invariant, so it complains689    // if I do. eslint-disable-next-line no-fallthrough690    case RootErrored: {691      if (expirationTime !== Idle) {692        // If this was an async render, the error may have happened due to693        // a mutation in a concurrent event. Try rendering one more time,694        // synchronously, to see if the error goes away. If there are695        // lower priority updates, let's include those, too, in case they696        // fix the inconsistency. Render at Idle to include all updates.697        markRootExpiredAtTime(root, Idle);698        break;699      }700      // Commit the root in its errored state.701      commitRoot(root);702      break;703    }704    case RootSuspended: {705      markRootSuspendedAtTime(root, expirationTime);706      const lastSuspendedTime = root.lastSuspendedTime;707      if (expirationTime === lastSuspendedTime) {708        root.nextKnownPendingLevel = getRemainingExpirationTime(finishedWork);709      }710      flushSuspensePriorityWarningInDEV();711      // We have an acceptable loading state. We need to figure out if we712      // should immediately commit it or wait a bit.713      // If we have processed new updates during this render, we may now714      // have a new loading state ready. We want to ensure that we commit715      // that as soon as possible.716      const hasNotProcessedNewUpdates =717        workInProgressRootLatestProcessedExpirationTime === Sync;718      if (719        hasNotProcessedNewUpdates &&720        // do not delay if we're inside an act() scope721        !(722          __DEV__ &&723          flushSuspenseFallbacksInTests &&724          IsThisRendererActing.current725        )726      ) {727        // If we have not processed any new updates during this pass, then728        // this is either a retry of an existing fallback state or a729        // hidden tree. Hidden trees shouldn't be batched with other work730        // and after that's fixed it can only be a retry. We're going to731        // throttle committing retries so that we don't show too many732        // loading states too quickly.733        let msUntilTimeout =734          globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now();735        // Don't bother with a very short suspense time.736        if (msUntilTimeout > 10) {737          if (workInProgressRootHasPendingPing) {738            const lastPingedTime = root.lastPingedTime;739            if (lastPingedTime === NoWork || lastPingedTime >= expirationTime) {740              // This render was pinged but we didn't get to restart741              // earlier so try restarting now instead.742              root.lastPingedTime = expirationTime;743              prepareFreshStack(root, expirationTime);744              break;745            }746          }747          const nextTime = getNextRootExpirationTimeToWorkOn(root);748          if (nextTime !== NoWork && nextTime !== expirationTime) {749            // There's additional work on this root.750            break;751          }752          if (753            lastSuspendedTime !== NoWork &&754            lastSuspendedTime !== expirationTime755          ) {756            // We should prefer to render the fallback of at the last757            // suspended level. Ping the last suspended level to try758            // rendering it again.759            root.lastPingedTime = lastSuspendedTime;760            break;761          }762          // The render is suspended, it hasn't timed out, and there's no763          // lower priority work to do. Instead of committing the fallback764          // immediately, wait for more data to arrive.765          root.timeoutHandle = scheduleTimeout(766            commitRoot.bind(null, root),767            msUntilTimeout,768          );769          break;770        }771      }772      // The work expired. Commit immediately.773      commitRoot(root);774      break;775    }776    case RootSuspendedWithDelay: {777      markRootSuspendedAtTime(root, expirationTime);778      const lastSuspendedTime = root.lastSuspendedTime;779      if (expirationTime === lastSuspendedTime) {780        root.nextKnownPendingLevel = getRemainingExpirationTime(finishedWork);781      }782      flushSuspensePriorityWarningInDEV();783      if (784        // do not delay if we're inside an act() scope785        !(786          __DEV__ &&787          flushSuspenseFallbacksInTests &&788          IsThisRendererActing.current789        )790      ) {791        // We're suspended in a state that should be avoided. We'll try to792        // avoid committing it for as long as the timeouts let us.793        if (workInProgressRootHasPendingPing) {794          const lastPingedTime = root.lastPingedTime;795          if (lastPingedTime === NoWork || lastPingedTime >= expirationTime) {796            // This render was pinged but we didn't get to restart earlier797            // so try restarting now instead.798            root.lastPingedTime = expirationTime;799            prepareFreshStack(root, expirationTime);800            break;801          }802        }803        const nextTime = getNextRootExpirationTimeToWorkOn(root);804        if (nextTime !== NoWork && nextTime !== expirationTime) {805          // There's additional work on this root.806          break;807        }808        if (809          lastSuspendedTime !== NoWork &&810          lastSuspendedTime !== expirationTime811        ) {812          // We should prefer to render the fallback of at the last813          // suspended level. Ping the last suspended level to try814          // rendering it again.815          root.lastPingedTime = lastSuspendedTime;816          break;817        }818        let msUntilTimeout;819        if (workInProgressRootLatestSuspenseTimeout !== Sync) {820          // We have processed a suspense config whose expiration time we821          // can use as the timeout.822          msUntilTimeout =823            expirationTimeToMs(workInProgressRootLatestSuspenseTimeout) - now();824        } else if (workInProgressRootLatestProcessedExpirationTime === Sync) {825          // This should never normally happen because only new updates826          // cause delayed states, so we should have processed something.827          // However, this could also happen in an offscreen tree.828          msUntilTimeout = 0;829        } else {830          // If we don't have a suspense config, we're going to use a831          // heuristic to determine how long we can suspend.832          const eventTimeMs: number = inferTimeFromExpirationTime(833            workInProgressRootLatestProcessedExpirationTime,834          );835          const currentTimeMs = now();836          const timeUntilExpirationMs =837            expirationTimeToMs(expirationTime) - currentTimeMs;838          let timeElapsed = currentTimeMs - eventTimeMs;839          if (timeElapsed < 0) {840            // We get this wrong some time since we estimate the time.841            timeElapsed = 0;842          }843          msUntilTimeout = jnd(timeElapsed) - timeElapsed;844          // Clamp the timeout to the expiration time. TODO: Once the845          // event time is exact instead of inferred from expiration time846          // we don't need this.847          if (timeUntilExpirationMs < msUntilTimeout) {848            msUntilTimeout = timeUntilExpirationMs;849          }850        }851        // Don't bother with a very short suspense time.852        if (msUntilTimeout > 10) {853          // The render is suspended, it hasn't timed out, and there's no854          // lower priority work to do. Instead of committing the fallback855          // immediately, wait for more data to arrive.856          root.timeoutHandle = scheduleTimeout(857            commitRoot.bind(null, root),858            msUntilTimeout,859          );860          break;861        }862      }863      // The work expired. Commit immediately.864      commitRoot(root);865      break;866    }867    case RootCompleted: {868      // The work completed. Ready to commit.869      if (870        // do not delay if we're inside an act() scope871        !(872          __DEV__ &&873          flushSuspenseFallbacksInTests &&874          IsThisRendererActing.current875        ) &&876        workInProgressRootLatestProcessedExpirationTime !== Sync &&877        workInProgressRootCanSuspendUsingConfig !== null878      ) {879        // If we have exceeded the minimum loading delay, which probably880        // means we have shown a spinner already, we might have to suspend881        // a bit longer to ensure that the spinner is shown for882        // enough time.883        const msUntilTimeout = computeMsUntilSuspenseLoadingDelay(884          workInProgressRootLatestProcessedExpirationTime,885          expirationTime,886          workInProgressRootCanSuspendUsingConfig,887        );888        if (msUntilTimeout > 10) {889          markRootSuspendedAtTime(root, expirationTime);890          root.timeoutHandle = scheduleTimeout(891            commitRoot.bind(null, root),892            msUntilTimeout,893          );894          break;895        }896      }897      commitRoot(root);898      break;899    }900    case RootLocked: {901      // This root has a lock that prevents it from committing. Exit. If902      // we begin work on the root again, without any intervening updates,903      // it will finish without doing additional work.904      markRootSuspendedAtTime(root, expirationTime);905      break;906    }907    default: {908      invariant(false, 'Unknown root exit status.');909    }910  }911}912// This is the entry point for synchronous tasks that don't go913// through Scheduler914function performSyncWorkOnRoot(root) {915  // Check if there's expired work on this root. Otherwise, render at Sync.916  const lastExpiredTime = root.lastExpiredTime;917  const expirationTime = lastExpiredTime !== NoWork ? lastExpiredTime : Sync;918  if (root.finishedExpirationTime === expirationTime) {919    // There's already a pending commit at this expiration time.920    // TODO: This is poorly factored. This case only exists for the921    // batch.commit() API.922    commitRoot(root);923  } else {924    invariant(925      (executionContext & (RenderContext | CommitContext)) === NoContext,926      'Should not already be working.',927    );928    flushPassiveEffects();929    // If the root or expiration time have changed, throw out the existing stack930    // and prepare a fresh one. Otherwise we'll continue where we left off.931    if (932      root !== workInProgressRoot ||933      expirationTime !== renderExpirationTime934    ) {935      prepareFreshStack(root, expirationTime);936      startWorkOnPendingInteractions(root, expirationTime);937    }938    // If we have a work-in-progress fiber, it means there's still work to do939    // in this root.940    if (workInProgress !== null) {941      const prevExecutionContext = executionContext;942      executionContext |= RenderContext;943      const prevDispatcher = pushDispatcher(root);944      const prevInteractions = pushInteractions(root);945      startWorkLoopTimer(workInProgress);946      do {947        try {948          workLoopSync();949          break;950        } catch (thrownValue) {951          handleError(root, thrownValue);952        }953      } while (true);954      resetContextDependencies();955      executionContext = prevExecutionContext;956      popDispatcher(prevDispatcher);957      if (enableSchedulerTracing) {958        popInteractions(((prevInteractions: any): Set<Interaction>));959      }960      if (workInProgressRootExitStatus === RootFatalErrored) {961        const fatalError = workInProgressRootFatalError;962        stopInterruptedWorkLoopTimer();963        prepareFreshStack(root, expirationTime);964        markRootSuspendedAtTime(root, expirationTime);965        ensureRootIsScheduled(root);966        throw fatalError;967      }968      if (workInProgress !== null) {969        // This is a sync render, so we should have finished the whole tree.970        invariant(971          false,972          'Cannot commit an incomplete root. This error is likely caused by a ' +973            'bug in React. Please file an issue.',974        );975      } else {976        // We now have a consistent tree. Because this is a sync render, we977        // will commit it even if something suspended. The only exception is978        // if the root is locked (using the unstable_createBatch API).979        stopFinishedWorkLoopTimer();980        root.finishedWork = (root.current.alternate: any);981        root.finishedExpirationTime = expirationTime;982        resolveLocksOnRoot(root, expirationTime);983        finishSyncRender(root, workInProgressRootExitStatus, expirationTime);984      }985      // Before exiting, make sure there's a callback scheduled for the next986      // pending level.987      ensureRootIsScheduled(root);988    }989  }990  return null;991}992function finishSyncRender(root, exitStatus, expirationTime) {993  if (exitStatus === RootLocked) {994    // This root has a lock that prevents it from committing. Exit. If we995    // begin work on the root again, without any intervening updates, it996    // will finish without doing additional work.997    markRootSuspendedAtTime(root, expirationTime);998  } else {999    // Set this to null to indicate there's no in-progress render.1000    workInProgressRoot = null;1001    if (__DEV__) {1002      if (1003        exitStatus === RootSuspended ||1004        exitStatus === RootSuspendedWithDelay1005      ) {1006        flushSuspensePriorityWarningInDEV();1007      }1008    }1009    commitRoot(root);1010  }1011}1012export function flushRoot(root: FiberRoot, expirationTime: ExpirationTime) {1013  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {1014    invariant(1015      false,1016      'work.commit(): Cannot commit while already rendering. This likely ' +1017        'means you attempted to commit from inside a lifecycle method.',1018    );1019  }1020  markRootExpiredAtTime(root, expirationTime);1021  ensureRootIsScheduled(root);1022  flushSyncCallbackQueue();1023}1024export function flushDiscreteUpdates() {1025  // TODO: Should be able to flush inside batchedUpdates, but not inside `act`.1026  // However, `act` uses `batchedUpdates`, so there's no way to distinguish1027  // those two cases. Need to fix this before exposing flushDiscreteUpdates1028  // as a public API.1029  if (1030    (executionContext & (BatchedContext | RenderContext | CommitContext)) !==1031    NoContext1032  ) {1033    if (__DEV__ && (executionContext & RenderContext) !== NoContext) {1034      warning(1035        false,1036        'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +1037          'already rendering.',1038      );1039    }1040    // We're already rendering, so we can't synchronously flush pending work.1041    // This is probably a nested event dispatch triggered by a lifecycle/effect,1042    // like `el.focus()`. Exit.1043    return;1044  }1045  flushPendingDiscreteUpdates();1046  // If the discrete updates scheduled passive effects, flush them now so that1047  // they fire before the next serial event.1048  flushPassiveEffects();1049}1050function resolveLocksOnRoot(root: FiberRoot, expirationTime: ExpirationTime) {1051  const firstBatch = root.firstBatch;1052  if (1053    firstBatch !== null &&1054    firstBatch._defer &&1055    firstBatch._expirationTime >= expirationTime1056  ) {1057    scheduleCallback(NormalPriority, () => {1058      firstBatch._onComplete();1059      return null;1060    });1061    workInProgressRootExitStatus = RootLocked;1062  }1063}1064export function deferredUpdates<A>(fn: () => A): A {1065  // TODO: Remove in favor of Scheduler.next1066  return runWithPriority(NormalPriority, fn);1067}1068export function syncUpdates<A, B, C, R>(1069  fn: (A, B, C) => R,1070  a: A,1071  b: B,1072  c: C,1073): R {1074  return runWithPriority(ImmediatePriority, fn.bind(null, a, b, c));1075}1076function flushPendingDiscreteUpdates() {1077  if (rootsWithPendingDiscreteUpdates !== null) {1078    // For each root with pending discrete updates, schedule a callback to1079    // immediately flush them.1080    const roots = rootsWithPendingDiscreteUpdates;1081    rootsWithPendingDiscreteUpdates = null;1082    roots.forEach((expirationTime, root) => {1083      markRootExpiredAtTime(root, expirationTime);1084      ensureRootIsScheduled(root);1085    });1086    // Now flush the immediate queue.1087    flushSyncCallbackQueue();1088  }1089}1090export function batchedUpdates<A, R>(fn: A => R, a: A): R {1091  const prevExecutionContext = executionContext;1092  executionContext |= BatchedContext;1093  try {1094    return fn(a);1095  } finally {1096    executionContext = prevExecutionContext;1097    if (executionContext === NoContext) {1098      // Flush the immediate callbacks that were scheduled during this batch1099      flushSyncCallbackQueue();1100    }1101  }1102}1103export function batchedEventUpdates<A, R>(fn: A => R, a: A): R {1104  const prevExecutionContext = executionContext;1105  executionContext |= EventContext;1106  try {1107    return fn(a);1108  } finally {1109    executionContext = prevExecutionContext;1110    if (executionContext === NoContext) {1111      // Flush the immediate callbacks that were scheduled during this batch1112      flushSyncCallbackQueue();1113    }1114  }1115}1116export function discreteUpdates<A, B, C, R>(1117  fn: (A, B, C) => R,1118  a: A,1119  b: B,1120  c: C,1121): R {1122  const prevExecutionContext = executionContext;1123  executionContext |= DiscreteEventContext;1124  try {1125    // Should this1126    return runWithPriority(UserBlockingPriority, fn.bind(null, a, b, c));1127  } finally {1128    executionContext = prevExecutionContext;1129    if (executionContext === NoContext) {1130      // Flush the immediate callbacks that were scheduled during this batch1131      flushSyncCallbackQueue();1132    }1133  }1134}1135export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {1136  const prevExecutionContext = executionContext;1137  executionContext &= ~BatchedContext;1138  executionContext |= LegacyUnbatchedContext;1139  try {1140    return fn(a);1141  } finally {1142    executionContext = prevExecutionContext;1143    if (executionContext === NoContext) {1144      // Flush the immediate callbacks that were scheduled during this batch1145      flushSyncCallbackQueue();1146    }1147  }1148}1149export function flushSync<A, R>(fn: A => R, a: A): R {1150  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {1151    invariant(1152      false,1153      'flushSync was called from inside a lifecycle method. It cannot be ' +1154        'called when React is already rendering.',1155    );1156  }1157  const prevExecutionContext = executionContext;1158  executionContext |= BatchedContext;1159  try {1160    return runWithPriority(ImmediatePriority, fn.bind(null, a));1161  } finally {1162    executionContext = prevExecutionContext;1163    // Flush the immediate callbacks that were scheduled during this batch.1164    // Note that this will happen even if batchedUpdates is higher up1165    // the stack.1166    flushSyncCallbackQueue();1167  }1168}1169export function flushControlled(fn: () => mixed): void {1170  const prevExecutionContext = executionContext;1171  executionContext |= BatchedContext;1172  try {1173    runWithPriority(ImmediatePriority, fn);1174  } finally {1175    executionContext = prevExecutionContext;1176    if (executionContext === NoContext) {1177      // Flush the immediate callbacks that were scheduled during this batch1178      flushSyncCallbackQueue();1179    }1180  }1181}1182function prepareFreshStack(root, expirationTime) {1183  root.finishedWork = null;1184  root.finishedExpirationTime = NoWork;1185  const timeoutHandle = root.timeoutHandle;1186  if (timeoutHandle !== noTimeout) {1187    // The root previous suspended and scheduled a timeout to commit a fallback1188    // state. Now that we have additional work, cancel the timeout.1189    root.timeoutHandle = noTimeout;1190    // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above1191    cancelTimeout(timeoutHandle);1192  }1193  if (workInProgress !== null) {1194    let interruptedWork = workInProgress.return;1195    while (interruptedWork !== null) {1196      unwindInterruptedWork(interruptedWork);1197      interruptedWork = interruptedWork.return;1198    }1199  }1200  workInProgressRoot = root;1201  workInProgress = createWorkInProgress(root.current, null, expirationTime);1202  renderExpirationTime = expirationTime;1203  workInProgressRootExitStatus = RootIncomplete;1204  workInProgressRootFatalError = null;1205  workInProgressRootLatestProcessedExpirationTime = Sync;1206  workInProgressRootLatestSuspenseTimeout = Sync;1207  workInProgressRootCanSuspendUsingConfig = null;1208  workInProgressRootNextUnprocessedUpdateTime = NoWork;1209  workInProgressRootHasPendingPing = false;1210  if (enableSchedulerTracing) {1211    spawnedWorkDuringRender = null;1212  }1213  if (__DEV__) {1214    ReactStrictModeWarnings.discardPendingWarnings();1215    componentsThatTriggeredHighPriSuspend = null;1216  }1217}1218function handleError(root, thrownValue) {1219  do {1220    try {1221      // Reset module-level state that was set during the render phase.1222      resetContextDependencies();1223      resetHooks();1224      if (workInProgress === null || workInProgress.return === null) {1225        // Expected to be working on a non-root fiber. This is a fatal error1226        // because there's no ancestor that can handle it; the root is1227        // supposed to capture all errors that weren't caught by an error1228        // boundary.1229        workInProgressRootExitStatus = RootFatalErrored;1230        workInProgressRootFatalError = thrownValue;1231        return null;1232      }1233      if (enableProfilerTimer && workInProgress.mode & ProfileMode) {1234        // Record the time spent rendering before an error was thrown. This1235        // avoids inaccurate Profiler durations in the case of a1236        // suspended render.1237        stopProfilerTimerIfRunningAndRecordDelta(workInProgress, true);1238      }1239      throwException(1240        root,1241        workInProgress.return,1242        workInProgress,1243        thrownValue,1244        renderExpirationTime,1245      );1246      workInProgress = completeUnitOfWork(workInProgress);1247    } catch (yetAnotherThrownValue) {1248      // Something in the return path also threw.1249      thrownValue = yetAnotherThrownValue;1250      continue;1251    }1252    // Return to the normal work loop.1253    return;1254  } while (true);1255}1256function pushDispatcher(root) {1257  const prevDispatcher = ReactCurrentDispatcher.current;1258  ReactCurrentDispatcher.current = ContextOnlyDispatcher;1259  if (prevDispatcher === null) {1260    // The React isomorphic package does not include a default dispatcher.1261    // Instead the first renderer will lazily attach one, in order to give1262    // nicer error messages.1263    return ContextOnlyDispatcher;1264  } else {1265    return prevDispatcher;1266  }1267}1268function popDispatcher(prevDispatcher) {1269  ReactCurrentDispatcher.current = prevDispatcher;1270}1271function pushInteractions(root) {1272  if (enableSchedulerTracing) {1273    const prevInteractions: Set<Interaction> | null = __interactionsRef.current;1274    __interactionsRef.current = root.memoizedInteractions;1275    return prevInteractions;1276  }1277  return null;1278}1279function popInteractions(prevInteractions) {1280  if (enableSchedulerTracing) {1281    __interactionsRef.current = prevInteractions;1282  }1283}1284export function markCommitTimeOfFallback() {1285  globalMostRecentFallbackTime = now();1286}1287export function markRenderEventTimeAndConfig(1288  expirationTime: ExpirationTime,1289  suspenseConfig: null | SuspenseConfig,1290): void {1291  if (1292    expirationTime < workInProgressRootLatestProcessedExpirationTime &&1293    expirationTime > Idle1294  ) {1295    workInProgressRootLatestProcessedExpirationTime = expirationTime;1296  }1297  if (suspenseConfig !== null) {1298    if (1299      expirationTime < workInProgressRootLatestSuspenseTimeout &&1300      expirationTime > Idle1301    ) {1302      workInProgressRootLatestSuspenseTimeout = expirationTime;1303      // Most of the time we only have one config and getting wrong is not bad.1304      workInProgressRootCanSuspendUsingConfig = suspenseConfig;1305    }1306  }1307}1308export function markUnprocessedUpdateTime(1309  expirationTime: ExpirationTime,1310): void {1311  if (expirationTime > workInProgressRootNextUnprocessedUpdateTime) {1312    workInProgressRootNextUnprocessedUpdateTime = expirationTime;1313  }1314}1315export function renderDidSuspend(): void {1316  if (workInProgressRootExitStatus === RootIncomplete) {1317    workInProgressRootExitStatus = RootSuspended;1318  }1319}1320export function renderDidSuspendDelayIfPossible(): void {1321  if (1322    workInProgressRootExitStatus === RootIncomplete ||1323    workInProgressRootExitStatus === RootSuspended1324  ) {1325    workInProgressRootExitStatus = RootSuspendedWithDelay;1326  }1327  // Check if there's a lower priority update somewhere else in the tree.1328  if (1329    workInProgressRootNextUnprocessedUpdateTime !== NoWork &&1330    workInProgressRoot !== null1331  ) {1332    // Mark the current render as suspended, and then mark that there's a1333    // pending update.1334    // TODO: This should immediately interrupt the current render, instead1335    // of waiting until the next time we yield.1336    markRootSuspendedAtTime(workInProgressRoot, renderExpirationTime);1337    markRootUpdatedAtTime(1338      workInProgressRoot,1339      workInProgressRootNextUnprocessedUpdateTime,1340    );1341  }1342}1343export function renderDidError() {1344  if (workInProgressRootExitStatus !== RootCompleted) {1345    workInProgressRootExitStatus = RootErrored;1346  }1347}1348// Called during render to determine if anything has suspended.1349// Returns false if we're not sure.1350export function renderHasNotSuspendedYet(): boolean {...

ReactFiberRoot.old.js

Source:ReactFiberRoot.old.js

...80    firstSuspendedTime >= expirationTime &&81    lastSuspendedTime <= expirationTime82  );83}84export function markRootSuspendedAtTime(85  root: FiberRoot,86  expirationTime: ExpirationTime,87): void {88  const firstSuspendedTime = root.firstSuspendedTime;89  const lastSuspendedTime = root.lastSuspendedTime;90  if (firstSuspendedTime < expirationTime) {91    root.firstSuspendedTime = expirationTime;92  }93  if (lastSuspendedTime > expirationTime || firstSuspendedTime === NoWork) {94    root.lastSuspendedTime = expirationTime;95  }96  if (expirationTime <= root.lastPingedTime) {97    root.lastPingedTime = NoWork;98  }...

ReactFiberRoot.new.js

Source:ReactFiberRoot.new.js

...80    firstSuspendedTime >= expirationTime &&81    lastSuspendedTime <= expirationTime82  );83}84export function markRootSuspendedAtTime(85  root: FiberRoot,86  expirationTime: ExpirationTime,87): void {88  const firstSuspendedTime = root.firstSuspendedTime;89  const lastSuspendedTime = root.lastSuspendedTime;90  if (firstSuspendedTime < expirationTime) {91    root.firstSuspendedTime = expirationTime;92  }93  if (lastSuspendedTime > expirationTime || firstSuspendedTime === NoWork) {94    root.lastSuspendedTime = expirationTime;95  }96  if (expirationTime <= root.lastPingedTime) {97    root.lastPingedTime = NoWork;98  }...

ReactFiberRoot.js

Source:ReactFiberRoot.js

...37    var firstSuspendedTime = root.firstSuspendedTime;38    var lastSuspendedTime = root.lastSuspendedTime;39    return firstSuspendedTime !== NoWork && firstSuspendedTime >= expirationTime && lastSuspendedTime <= expirationTime;40  }41  function markRootSuspendedAtTime(root, expirationTime) {42    var firstSuspendedTime = root.firstSuspendedTime;43    var lastSuspendedTime = root.lastSuspendedTime;44    if (firstSuspendedTime < expirationTime) {45      root.firstSuspendedTime = expirationTime;46    }47    if (lastSuspendedTime > expirationTime || firstSuspendedTime === NoWork) {48      root.lastSuspendedTime = expirationTime;49    }50    if (expirationTime <= root.lastPingedTime) {51      root.lastPingedTime = NoWork;52    }53    if (expirationTime <= root.lastExpiredTime) {54      root.lastExpiredTime = NoWork;55    }...

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.screenshot({ path: 'example.png' });7  await browser.close();8})();9const playwright = require('playwright');10module.exports = {11  chromium: {12    launch: async (options) => {13      const browser = await playwright.chromium.launch(options);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  },20};21const myPlaywright = require('./myPlaywright');22(async () => {23  const browser = await myPlaywright.chromium.launch();24  await browser.close();25})();26const { chromium } = require('playwright');27(async () => {28  const browser = await chromium.launch();29  const context = await browser.newContext();30  const page = await context.newPage();31  await page.screenshot({ path: 'example.png' });32  await browser.close();33})();34const { chromium } = require('playwright');35const { markRootSuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');36(async () => {37  const browser = await chromium.launch();38  const context = await browser.newContext();39  const page = await context.newPage();40  await page.screenshot({ path: 'example.png' });41  await browser.close();42})();43const { chromium } = require('playwright');44const { markRootSuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');45(async () => {46  const browser = await chromium.launch();47  const context = await browser.newContext();48  const page = await context.newPage();49  await page.screenshot({ path: 'example.png' });50  await browser.close();51})();

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.screenshot({ path: `example.png` });7  await browser.close();8})();9    at Object.dispatch (/node_modules/playwright/lib/client/protocol.js:110:13)10    at Connection._onMessage (/node_modules/playwright/lib/client/connection.js:131:24)11    at WebSocketTransport._ws.addEventListener.event (/node_modules/playwright/lib/client/connection.js:53:46)12    at WebSocket.onMessage (/node_modules/ws/lib/event-target.js:132:16)13    at WebSocket.emit (events.js:315:20)14    at Receiver.receiverOnMessage (/node_modules/ws/lib/websocket.js:789:20)15    at Receiver.emit (events.js:315:20)16    at Receiver.dataMessage (/node_modules/ws/lib/receiver.js:437:14)17    at Receiver.getData (/node_modules/ws/lib/receiver.js:367:17)18    at Receiver.startLoop (/node_modules/ws/lib/receiver.js:153:22)

Using AI Code Generation

1const { markRootSuspendedAtTime } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');2markRootSuspendedAtTime(1000);3markRootSuspendedAtTime(2000);4const { markRootUnsuspendedAtTime } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');5markRootUnsuspendedAtTime(3000);6markRootUnsuspendedAtTime(4000);7const { markRootSuspendedAtTime } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');8markRootSuspendedAtTime(5000);9markRootSuspendedAtTime(6000);10const { markRootUnsuspendedAtTime } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');11markRootUnsuspendedAtTime(7000);12markRootUnsuspendedAtTime(8000);13const { markRootSuspendedAtTime } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');14markRootSuspendedAtTime(9000);15markRootSuspendedAtTime(10000);16const { markRootUnsuspendedAtTime } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');17markRootUnsuspendedAtTime(11000);18markRootUnsuspendedAtTime(12000);19const { markRootSuspendedAtTime } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');20markRootSuspendedAtTime(13000);21markRootSuspendedAtTime(14000);22const { markRootUnsuspendedAtTime } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');23markRootUnsuspendedAtTime(

Using AI Code Generation

1const { markRootSuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2markRootSuspendedAtTime(1000);3const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');4markRootUnsuspendedAtTime(1000);5const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');6markRootUnsuspendedAtTime(1000);7const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');8markRootUnsuspendedAtTime(1000);9const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');10markRootUnsuspendedAtTime(1000);11const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');12markRootUnsuspendedAtTime(1000);13const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');14markRootUnsuspendedAtTime(1000);15const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');16markRootUnsuspendedAtTime(1000);17const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement');18markRootUnsuspendedAtTime(1000);

Using AI Code Generation

1const { markRootSuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');2markRootSuspendedAtTime(1000);3const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');4markRootUnsuspendedAtTime(1000);5const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');6markRootUnsuspendedAtTime(1000);7const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');8markRootUnsuspendedAtTime(1000);9const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');10markRootUnsuspendedAtTime(1000);11const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');12markRootUnsuspendedAtTime(1000);13const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');14markRootUnsuspendedAtTime(1000);15const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');16markRootUnsuspendedAtTime(1000);17const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');18markRootUnsuspendedAtTime(1000);

Using AI Code Generation

1const playwright = require('playwright');2const { markRootSuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');3const browser = await playwright['chromium'].launch({4});5const context = await browser.newContext();6const page = await context.newPage();7await markRootSuspendedAtTime(page, 1000);8await page.screenshot({ path: 'screenshot.png' });9await browser.close();

Using AI Code Generation

1const { markRootSuspendedAtTime } = require('playwright/lib/server/trace/recorder/snapshotter');2markRootSuspendedAtTime(1000);3const { test, expect } = require('@playwright/test');4test('test', async ({ page }) => {5  expect(1).toBe(1);6});7module.exports = {8    use: {9    },10  };11{12  "bin": {13  },14  "scripts": {15  },16  "repository": {

Using AI Code Generation

1const { markRootSuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');2markRootSuspendedAtTime(1000, 'test');3const { markRootUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');4markRootUnsuspendedAtTime(2000, 'test');5const { markRootStartedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');6markRootStartedAtTime(3000, 'test');7const { markRootFinishedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');8markRootFinishedAtTime(4000, 'test');9const { markRootFailedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');10markRootFailedAtTime(5000, 'test');11const { markStepStartedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');12markStepStartedAtTime(6000, 'test');13const { markStepSuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');14markStepSuspendedAtTime(7000, 'test');15const { markStepUnsuspendedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');16markStepUnsuspendedAtTime(8000, 'test');17const { markStepFinishedAtTime } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');18markStepFinishedAtTime(9000, 'test');

Using AI Code Generation

1const { markRootSuspendedAtTime } = require('playwright/internal/inspector/inspector')2markRootSuspendedAtTime(1000, 2000)3const { markRootSuspendedAtTime } = require('playwright/internal/inspector/inspector')4markRootSuspendedAtTime(1000, 2000)5const { markRootSuspendedAtTime } = require('playwright/internal/inspector/inspector')6markRootSuspendedAtTime(1000, 2000)7const { markRootSuspendedAtTime } = require('playwright/internal/inspector/inspector')8markRootSuspendedAtTime(1000, 2000)9const { markRootSuspendedAtTime } = require('playwright/internal/inspector/inspector')10markRootSuspendedAtTime(1000, 2000)11const { markRootSuspendedAtTime } = require('playwright/internal/inspector/inspector')12markRootSuspendedAtTime(1000, 2000)13const { markRootSuspendedAtTime } = require('playwright/internal/inspector/inspector')14markRootSuspendedAtTime(1000, 2000)15const { markRootSuspendedAtTime } = require('playwright/internal/inspector/inspector')16markRootSuspendedAtTime(1000, 2000)17const { markRootSuspendedAtTime } = require('playwright/internal/inspector/inspector')18markRootSuspendedAtTime(1000, 2000)19const { markRootSuspendedAtTime } = require('playwright/internal/inspector/ins

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.