Backstop.js 是一个用于自动化测试网页外观的工具，可以在元素可见后拍摄屏幕截图。下面是一个包含代码示例的解决方法：

1. 安装 Backstop.js

首先，需要安装 Node.js 和 npm。然后，在命令行中运行以下命令来全局安装 Backstop.js：

npm install -g backstopjs

2. 初始化 Backstop.js

在项目的根目录下，运行以下命令来初始化 Backstop.js：

backstop init

这将会在项目中创建一个 backstop.json 配置文件和一个 backstop_data 目录。

3. 配置 backstop.json

打开 backstop.json 文件，修改 scenarios 部分来定义要测试的场景。在每个场景中，可以指定要测试的 URL、元素选择器和其他选项。

例如，以下是一个简单的 backstop.json 配置文件示例：

{
  "id": "my_project",
  "viewports": [
    {
      "name": "desktop",
      "width": 1440,
      "height": 900
    }
  ],
  "scenarios": [
    {
      "label": "Home",
      "url": "http://example.com",
      "selectors": ["#main-content"]
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "casper_scripts": "backstop_data/casper_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "engine": "puppeteer",
  "report": ["browser"],
  "debug": false
}

在这个示例中，我们定义了一个名为 "Home" 的场景，测试的 URL 是 "http://example.com"，要截图的元素是 ID 为 "main-content" 的元素。

4. 运行测试

在命令行中运行以下命令来运行测试：

backstop test

Backstop.js 将使用 Puppeteer 来加载页面并拍摄截图。截图将保存在 backstop_data/bitmaps_test 目录下。

5. 查看测试结果

测试完成后，Backstop.js 将生成一个 HTML 报告，显示比较结果和失败的测试。报告将保存在 backstop_data/html_report 目录下。你可以在浏览器中打开该报告来查看测试结果。

这就是使用 Backstop.js 在元素可见后拍摄屏幕截图的解决方法。你可以根据需要自定义配置文件，添加更多的测试场景和选项。