Node.js 中使用 Playwright 定位到一个 iframe

 

 

要在 Node.js 中使用 Playwright 定位到一个 iframe 并获取其在屏幕中的位置，可以按照以下步骤进行：

1. 使用 `page.frame()` 方法获取 iframe 元素的句柄：

```javascript
const frame = await page.frame({ /* ... */ });
```

其中 `{ /* ... */ }` 参数可以是一个对象，其中包含用于定位 iframe 的属性，例如 `name` 或 `src` 等属性。

2. 一旦获得了 iframe 的句柄，就可以使用 `frame.boundingBox()` 方法获取其在屏幕上的位置和大小：

```javascript
const frameBoundingBox = await frame.boundingBox();
```

此方法将返回一个矩形对象，其中包含 iframe 的左上角坐标、宽度和高度。例如，可以使用以下代码打印此矩形的属性：

```javascript
console.log(frameBoundingBox.x, frameBoundingBox.y, frameBoundingBox.width, frameBoundingBox.height);
```

这将输出 iframe 的左上角坐标、宽度和高度。

注意：在使用 `frame.boundingBox()` 方法之前，确保已经等待了 iframe 加载完成，否则可能会返回空值。

完整示例代码如下所示：

```javascript
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 定位 iframe
  const frame = await page.frame({ src: 'http://example.net' });

  // 等待 iframe 加载完成
  await frame.waitForLoadState();

  // 获取 iframe 在屏幕上的位置和大小
  const frameBoundingBox = await frame.boundingBox();

  console.log(frameBoundingBox.x, frameBoundingBox.y, frameBoundingBox.width, frameBoundingBox.height);

  await browser.close();
})();
``` 

这将打开一个 Chromium 浏览器窗口，导航到示例网站并定位到指定的 iframe，然后获取其在屏幕上的位置和大小并打印输出。

 

 

 

 

 

 

---

 

 

 

 

使用 `page.frame(selector)` 方法可以获取到指定的 iframe 元素，但是需要注意以下几个问题：

1. 如果 iframe 的 `src` 属性为跨域地址，则需要设置 `browserContext` 的 `viewport` 选项为 `{ deviceScaleFactor: 1 }`，以便使 Playwright 在另一个浏览器上下文中加载 iframe。

例如：

```javascript
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({ viewport: { deviceScaleFactor: 1 } });
  const page = await context.newPage();
  await page.goto('https://example.com');

  const iframe = await page.frame('iframe[src="https://example.net"]');
  console.log(await iframe.title());

  await browser.close();
})();
```

2. 如果指定的 iframe 未加载完成，则需要等待 iframe 加载完成后才能访问其内容。

例如：

```javascript
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com');

  const iframe = await page.frame('iframe[src="https://example.net"]');
  await iframe.waitForLoadState();

  console.log(await iframe.title());

  await browser.close();
})();
```

如果 iframe 标签内嵌的网页没有加载完成，则无法获取到 iframe 元素。

3. 如果 `page.frame(selector)` 方法无法获取到 iframe 元素，则可能需要先切换到其所在的父级 frame 中。

例如：

```javascript
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com');

  const parentFrame = page.mainFrame();
  const iframe = await parentFrame.frame('iframe[src="https://example.net"]');
  await iframe.waitForLoadState();

  console.log(await iframe.title());

  await browser.close();
})();
```

在这个例子中，我们首先获取了页面的主 frame，然后在其中查找指定的 iframe 元素。如果需要访问嵌套在 iframe 中的内容，则必须等待其加载完成后才能访问。

希望这些提示可以帮助你在 Playwright 中成功获取 iframe 元素。

 

 

 

---

 

 

 

可以使用 `page.locator(selector).locatorFor('frame')` 方法获得指定 iframe 的坐标。

例如，假设有如下 HTML 代码：

```html
<iframe src="https://example.com" style="width: 300px; height: 400px;"></iframe>
```

可以使用以下代码获取该 iframe 元素的坐标：

```javascript
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.setContent('<iframe src="https://example.com" style="width: 300px; height: 400px;"></iframe>');

  const iframeLocator = page.locator('iframe[src="https://example.com"]');
  const iframeFrame = iframeLocator.locatorFor('frame');
  const boundingBox = await iframeFrame.boundingBox();

  console.log(`iframe x: ${boundingBox.x}, y: ${boundingBox.y}`);

  await browser.close();
})();
```

在这个例子中，我们首先使用 `page.locator(selector)` 方法获取指定的 iframe 元素，然后使用 `locatorFor('frame')` 方法获取指向该 iframe 元素的 frame 定位器。最后，通过 `boundingBox()` 方法获取该 iframe 元素的位置和大小信息。

请注意，这个示例假设所有 iframe 元素都在页面顶级，如果你需要获取嵌套的 iframe 元素的位置，则需要先通过 `frame()` 方法转到其所在的 frame 中。

另外，这种方法只适用于已经加载完成的 iframe 元素。如果在 iframe 元素加载完成之前运行此代码，则可能无法获取到正确的位置信息。