storyBook play学习

场景

在官方给出的案例中，
Page.stories.js

import { within, userEvent } from '@storybook/testing-library'
import MyPage from './Page.vue'export default {title: 'Example/Page',component: MyPage,parameters: {// More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layoutlayout: 'fullscreen'}
}export const LoggedOut = {}// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
export const LoggedIn = {render: () => ({components: {MyPage},template: '<my-page />'}),play: async ({ canvasElement }) => {const canvas = within(canvasElement)const loginButton = await canvas.getByRole('button', {name: /Log in/i})await userEvent.click(loginButton)}
}

这段代码是一个测试脚本，用于模拟用户登录行为并点击登录按钮。

• const canvas = within(canvasElement)：within 是一个测试工具函数，它可以让你在给定的 canvasElement 内部进行 DOM 查询操作。在这段代码中，它将传递给它的 canvasElement 封装成一个可用于操作的对象 canvas。

• const loginButton = await canvas.getByRole('button', { name: /Log in/i })：getByRole 是一个用于根据元素角色获取元素的函数。在这里，它将查找一个角色为 'button' 且名称匹配正则表达式 /Log in/i 的按钮元素，并将结果赋值给变量 loginButton。/Log in/i 表示不区分大小写匹配字符串 'Log in'。

• await userEvent.click(loginButton)：userEvent.click 是一个模拟用户点击事件的函数。在这里，它会模拟用户点击 loginButton 元素，执行点击操作。

这段代码的作用是在一个渲染的页面中找到名称为 “Log in” 的按钮，并模拟用户点击该按钮。这样就可以测试用户登录的交互行为。