playright拖拽弹窗的滚动条至弹窗内容底部

1. 定位弹窗的内容区域

首先，需要定位弹窗中包含滚动条的内容区域。这通常是一个带有 overflow: auto 或 overflow: scroll 样式的元素。

2. 计算滚动高度

获取该元素的 scrollHeight，然后将其滚动到最大高度，即内容的底部。

3. 执行滚动操作

你可以使用 Playwright 的 page.evaluate 方法在浏览器上下文中执行 JavaScript 代码，来控制滚动行为。

import { test, expect } from '@playwright/test';

test('Scroll modal content to the bottom', async ({ page }) => {
  // 打开页面
  await page.goto('https://example.com'); // 替换为实际页面URL

  // 等待弹窗出现并定位弹窗内容区域
  const modalContent = await page.waitForSelector('.modal-content'); // 替换为实际弹窗内容的选择器

  // 滚动弹窗内容到底部
  await modalContent.evaluate((element) => {
    element.scrollTop = element.scrollHeight;
  });

  // 断言：确保滚动到了底部
  const scrollTop = await modalContent.evaluate((element) => element.scrollTop);
  const scrollHeight = await modalContent.evaluate((element) => element.scrollHeight);
  const clientHeight = await modalContent.evaluate((element) => element.clientHeight);

  expect(scrollTop + clientHeight).toBe(scrollHeight);
});

关键点说明

1. 定位内容区域: 使用 waitForSelector 定位到包含滚动条的内容区域元素。这个区域通常是弹窗的主体部分。

2. 滚动到底部: 通过 evaluate 方法执行 JavaScript 代码，将元素的 scrollTop 设置为 scrollHeight 来实现滚动到底部的效果。

3. 验证滚动效果: 通过 scrollTop + clientHeight 和 scrollHeight 进行对比，验证是否已经滚动到底部。

适应不同情况

• 多层级弹窗: 如果弹窗内部有嵌套滚动区域，需要确保选择器正确指向实际需要滚动的元素。
• 弹窗动态内容加载: 如果弹窗内容是动态加载的，确保在滚动之前内容已经完全加载完毕，可以使用 waitForLoadState 或 waitForSelector 等方法确保内容加载完成。