Selenium 自动测试 Vue3 页面示例

Selenium 可以用来自动测试 Vue3 页面。下面是一个简单的例子，展示如何使用 Selenium 自动测试 Vue3 页面中的按钮点击操作。

前提条件：

• 安装 Chrome 浏览器及其 WebDriver（确保 ChromeDriver 和浏览器版本匹配）。
• 使用 Python 作为测试脚本语言。
• 安装 Selenium 库：

pip install selenium

Vue3 页面示例

假设我们有一个 Vue3 页面，里面有一个按钮，点击后会弹出一条消息。

<template>
  <div>
    <button @click="showMessage">Click me</button>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    showMessage() {
      this.message = 'Hello from Vue3!';
    },
  },
};
</script>

Selenium 自动测试示例

以下是使用 Selenium 测试该页面的 Python 代码。

from selenium import webdriver
from selenium.webdriver.common.by import By
import time

# 初始化 Chrome WebDriver
driver = webdriver.Chrome()

try:
    # 打开目标 Vue3 页面
    driver.get('http://localhost:8080')  # Vue3 应用的本地地址

    # 查找按钮并点击
    button = driver.find_element(By.XPATH, "//button[text()='Click me']")
    button.click()

    # 等待页面更新
    time.sleep(1)  # 等待一秒以确保 Vue3 页面完成渲染

    # 查找显示消息的元素
    message_element = driver.find_element(By.XPATH, "//p[text()='Hello from Vue3!']")

    # 断言消息是否正确显示
    assert message_element.text == 'Hello from Vue3!', '测试失败，消息不匹配'

    print('测试通过，消息正确显示')
finally:
    # 关闭浏览器
    driver.quit()

测试流程说明：

1. 使用 Selenium 打开本地运行的 Vue3 页面。
2. 查找页面上的按钮元素，并模拟点击。
3. 点击后，等待页面更新（可以使用显式等待或 time.sleep()）。
4. 检查页面中是否正确显示了按钮点击后弹出的消息。
5. 如果消息匹配预期，则测试通过，否则测试失败。

注意事项：

• 使用 By.XPATH 定位按钮和消息元素，确保 XPath 表达式与实际页面结构匹配。
• Vue3 是基于异步渲染的，所以在测试中要注意页面的加载和渲染时间。