https://playwright.dev/docs/evaluating

Giới thiệu

• Playwright scripts chạy trong môi trường của Playwright.
• Page script chạy trong môi trường của browser.
• Hai môi trường này độc lập, không liên quan đến nhau.

• page.evaluate() API có thể dùng để chạy code Javascript trên browser và lấy kết quả về môi trường của browser.
• Các object global của browser như window hay document có thể dùng trong evaluate

const href = await page.evaluate(() => document.location.href);

• Nếu kết quả là một promise, hoặc là một async evaluate thì sẽ tự động chờ cho tới khi promise này được resolve

const status = await page.evaluate(async () => {
  const response = await fetch(location.href);
  return response.status;
});

Evaluation argument

• Playwright evalution method như page.evaluate() sử dụng một optional argument duy nhất.
• Argument này là kết hợp giữa Serializable value và JSHandle hoặc ElementHandle instances.
• Handles sẽ được tự convert theo giá trị mà nó đang biểu diễn

// A primitive value.
await page.evaluate(num => num, 42);

// An array.
await page.evaluate(array => array.length, [1, 2, 3]);

// An object.
await page.evaluate(object => object.foo, { foo: 'bar' });

// A single handle.
const button = await page.evaluateHandle('window.button');
await page.evaluate(button => button.textContent, button);

// Alternative notation using elementHandle.evaluate.
await button.evaluate((button, from) => button.textContent.substring(from), 5);

// Object with multiple handles.
const button1 = await page.evaluateHandle('window.button1');
const button2 = await page.evaluateHandle('window.button2');
await page.evaluate(
    o => o.button1.textContent + o.button2.textContent,
    { button1, button2 });

// Object destructuring works. Note that property names must match
// between the destructured object and the argument.
// Also note the required parenthesis.
await page.evaluate(
    ({ button1, button2 }) => button1.textContent + button2.textContent,
    { button1, button2 });

// Array works as well. Arbitrary names can be used for destructuring.
// Note the required parenthesis.
await page.evaluate(
    ([b1, b2]) => b1.textContent + b2.textContent,
    [button1, button2]);

// Any non-cyclic mix of serializables and handles works.
await page.evaluate(
    x => x.button1.textContent + x.list[0].textContent + String(x.foo),
    { button1, list: [button2], foo: null });

• Cách làm đúng:

const data = { text: 'some data', value: 1 };
// Pass |data| as a parameter.
const result = await page.evaluate(data => {
  window.myApp.use(data);
}, data);

• Cách làm đúng: truyền data vào parameter của hàm callback trong evaluate:

const data = { text: 'some data', value: 1 };
// Pass |data| as a parameter.
const result = await page.evaluate(data => {
  window.myApp.use(data);
}, data);

• Cách làm sai: không truyền data vào parameter của hàm callback trong evaluate

const data = { text: 'some data', value: 1 };
const result = await page.evaluate(() => {
  // There is no |data| in the web page.
  window.myApp.use(data);
});