如何用Playwright+TypeScript设置DOM元素的src属性值？

核心错误点 #

• ID选择器多了多余单引号：你在拼接getElementById的参数时，错误添加了额外单引号（"'image-" + ... + "'"），导致查找的ID是带单引号的字符串（比如'image-xxx'），但实际元素ID是image-xxx，因此找不到目标元素，后续setAttribute无法执行。
• 外部变量未传入浏览器上下文：ImageLandingSteps.IMAGE_ID是TypeScript上下文的变量，直接在addInitScript的回调里引用会报错——回调运行在浏览器环境，无法访问Node.js/TS环境的变量，必须通过参数传递。
• DOMContentLoaded事件可能已触发：如果页面在注入脚本时已完成DOM加载，DOMContentLoaded事件不会再触发，导致回调代码不执行。

修正后的代码 #

await this.page.addInitScript(({ imageId }) => {
  const setImageSrc = () => {
    const imageElement = document.getElementById(`image-${imageId}`);
    if (imageElement) {
      imageElement.setAttribute('src', 'fhfdadsafsdf');
    }
  };

  // 检查DOM状态，避免错过事件时机
  if (document.readyState === 'loading') {
    window.addEventListener('DOMContentLoaded', setImageSrc);
  } else {
    setImageSrc();
  }
}, { imageId: ImageLandingSteps.IMAGE_ID }); // 传递外部变量到浏览器上下文

更简洁的替代方案 #

直接使用Playwright的locatorAPI操作元素，无需注入初始化脚本，逻辑更直观：

const imageLocator = this.page.locator(`#image-${ImageLandingSteps.IMAGE_ID}`);
// 确保元素已挂载
await imageLocator.waitFor({ state: 'attached' });
// 设置src属性
await imageLocator.setAttribute('src', 'fhfdadsafsdf');

内容的提问来源于stack exchange，提问作者Amit Verma