使用Playwright获取页面中不可见DOM元素的‘value’属性

// 尝试1：获取body的innerHTML，但无法针对特定元素的value属性
const aHandle = await this.page.evaluateHandle(() => document.body);
const resultHandle = await this.page.evaluateHandle(body => body.innerHTML, aHandle);
console.log(await resultHandle.jsonValue()); // 无法直接获取特定元素的value

// 尝试2：获取一个通用handle，并尝试getProperty('value')，但'value'并非所有DOM元素的通用属性
let manufacturerLocator = this.page.locator(this.elements.manufacturer); // 假设this.elements.manufacturer是选择器
const handle = await this.page.evaluateHandle(() => ({window, document})); // 获取一个包含window和document的handle
const properties = await handle.getProperties(); // 获取handle的属性
// manufacturer = await handle.getProperty('value'); // 错误，handle不是特定元素，且'value'不是其通用属性

import { Page, Locator } from '@playwright/test'; // 导入Page和Locator类型

/**
 * 从DOM元素的'value'属性中获取值，即使元素当前不可见。
 * 适用于<input>, <textarea>, <select>等具有value属性的元素。
 *
 * @param page Playwright的Page对象实例。
 * @param selector Playwright选择器字符串，用于定位目标元素。
 * @returns Promise<string> 包含目标元素的'value'属性值。
 * @throws Error 如果元素未找到。
 */
async function getValueFromElementValueProperty(page: Page, selector: string): Promise<string> {
    // 1. 使用page.locator()获取定位器对象
    const elementLocator: Locator = page.locator(selector);

    // 2. 获取元素的ElementHandle。
    //    elementHandle()会等待元素出现在DOM中，但不会等待其可见性。
    //    如果元素不存在，它将返回null（或在超时后抛出错误，取决于Playwright配置）。
    const elementHandle = await elementLocator.elementHandle();

    if (!elementHandle) {
        throw new Error(`无法找到选择器为 "${selector}" 的元素。`);
    }

    // 3. 在ElementHandle上执行evaluateHandle，直接访问元素的value属性。
    //    这里将element断言为HTMLInputElement等类型，以获得更好的TypeScript类型推断和安全性。
    const valueHandle = await elementHandle.evaluateHandle((element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => element.value);

    // 4. 从JSHandle中提取实际的字符串值。
    const value = await valueHandle.jsonValue();

    // 5. 释放JSHandle资源。在不需要JSHandle后，释放它可以帮助管理浏览器内存。
    await valueHandle.dispose();

    // 确保返回的是字符串类型。
    return String(value);
}

import { test, expect, Page } from '@playwright/test';
// 假设你将getValueFromElementValueProperty函数放在了 './utils/dom-helpers.ts' 文件中
// import { getValueFromElementValueProperty } from './utils/dom-helpers';

test('成功获取页面中不可见元素的value属性', async ({ page }) => {
    // 模拟一个包含不可见textarea的页面内容
    await page.setContent(`
        <div id="app">
            <div style="display: none;">
                <textarea id="Manufacturer" class="stb-rich-text-fields" readonly>示例制造商名称</textarea>
            </div>
            <input type="text" id="visibleInput" value="可见输入值">
        </div>
    `);

    // 定义你的目标选择器
    const manufacturerSelector = '#Manufacturer';

    // 使用工具函数获取不可见textarea的value属性
    const manufacturerValue = await getValueFromElementValueProperty(page, manufacturerSelector);

    console.log('获取到的制造商值:', manufacturerValue);
    expect(manufacturerValue).toBe('示例制造商名称');

    // 比较：对于标准的可见输入字段，Playwright提供了更简洁的方法
    const visibleInputSelector = '#visibleInput';
    const visibleInputValue = await page.locator(visibleInputSelector).inputValue();
    console.log('获取到的可见输入值 (使用locator.inputValue()):', visibleInputValue);
    expect(visibleInputValue).toBe('可见输入值');
});