arrow-left Back to topicQuizHandlesCheck yourself1.You have code that does: const handle = await page.$('button.submit'); // React re-renders; await handle.click(). What's the risk and how do you fix it?No risk — ElementHandle tracks DOM changes automaticallyThe handle points to the specific DOM node captured at page.$() time. If React replaces that node during re-render, the handle is stale and click() operates on a detached element. Fix: replace with page.locator('button.submit').click() — locators re-query on each useThe code will throw an error immediately when the element is detached2.What is the key difference between a Locator and an ElementHandle?Locator is faster because it caches the element reference.Locator stores query logic and re-queries the DOM fresh on every interaction; ElementHandle points to a specific DOM node that can become stale.ElementHandle supports more methods than Locator.They are equivalent — Locator is just a newer name for ElementHandle.3.When is a JSHandle useful compared to page.evaluate()?JSHandle is the only way to read browser state — page.evaluate() can only trigger actions.When you need to hold a reference to a non-serializable browser object (like window or a large array) and perform multiple operations on it without serializing it each time.JSHandle is required for async operations in the browser.JSHandle runs faster than page.evaluate() for all use cases.4.What does evaluateHandle() return compared to evaluate()?evaluateHandle() returns a serialized JSON value; evaluate() returns a handle.evaluateHandle() returns a JSHandle (a browser-side object reference); evaluate() returns a serialized JSON value.They are identical — both return serialized values.evaluateHandle() returns an ElementHandle; evaluate() returns a JSHandle.5.What happens to all handles when the page navigates to a new URL?Handles are automatically updated to point to elements on the new page.All handles become invalid — the browser context creates a new JavaScript environment on navigation.Handles remain valid as long as the element ID is the same.Only ElementHandles become invalid; JSHandles survive navigation.6.What is the remaining legitimate use case for ElementHandle (over Locator)?Clicking elements — ElementHandle.click() is more reliable.Getting pixel coordinates via ElementHandle.boundingBox() for manual gesture simulations on canvas or custom gesture libraries.Form filling — ElementHandle.fill() triggers different browser events.There is no remaining use case — ElementHandle is fully deprecated.7.Why should you call handle.dispose() when you're done with a JSHandle?To close the browser connection.To release the browser-side object and allow garbage collection — handles prevent GC from collecting the referenced object.To commit any pending changes to the DOM.It's optional — Playwright automatically disposes all handles at test end.8.You want to call multiple operations on a large JavaScript array stored in the browser without serializing it each time. What is the correct approach?Use page.evaluate() to serialize the full array each time.Use page.evaluateHandle() to get a JSHandle to the array, pass that handle to subsequent page.evaluate() calls, and dispose() when done.Store the array in localStorage and read it in each evaluate() call.Create a new BrowserContext for each operation to avoid serialization overhead.Submit answersarrow-left PreviousEvaluating JavaScriptEventsNext arrow-right