playwright 测试一.准备工作1.项目安装相应的包1npm init playwright@latest 2.进行可视化操作1npx playwright test --ui 二.知识准备Locator | Playwright 中文网 上面这个网站记录很多的 api 方法 行动 描述 locator.check() 检查输入复选框 locator.click() 单击该元素 locator.uncheck() 取消选中输入复选框 locator.hover() 将鼠标悬停在元素上 locator.fill() 填写表单字段,输入文本 locator.focus() 聚焦元素 locator.press() 按单个键 locator.setInputFiles() 选择要上传的文件 locator.selectOption() 在下拉菜单中选择选项
three.js一.认识three.js 未使用框架开发 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657import * as THREE from "three";import "./style.css";// 创建一个场景const scene = new THREE.Scene();// 创建一个相机const camera = new THREE.PerspectiveCamera( // 视野角度 75, // 视口宽高比 window.innerWidth / window.innerHeight, // 近裁剪面 0.1, // 远裁剪面 1000);// 创建一个渲染器const render = new THREE.WebGLRenderer();// 设置渲染器的大小render.setSize(window.innerWidth, window. ...
HTML-CSS-补充学习一. HTML 语义化标签 标签 语义/用途 示例 适用场景 页面结构 <header> 定义页面或区域的头部(如网站标题、导航栏) <header><h1>网站标题</h1><nav>...</nav></header> 页面顶部、文章/章节标题区域 <nav> 定义导航链接区域 <nav><ul><li><a href="#">首页</a></li></ul></nav> 网站主导航、侧边栏导航 <main> 定义页面主要内容(一个页面只能有一个) <main><article>...</article></main> 页面核心内容区域 <article> 定义独立的内容块(如博客文章、新闻) <article>& ...
JavaScriptPromise 一.数据结构1.JavaScript 有哪些数据类型 💡 共有八个数据类型,分别是undefined,Null,Boolean,String,Number,Object,Symbol,Bigint 这些数据类型可以分为原始数据类型与引用数据类型(复杂数据类型),他们在内存中的存储方式不同 其中 **Symbol** 和 **BigInt\*\* 是 ES6 中新增的数据类型: **Symbol**代表创建后独一无二且不可变的数据类型,它主要是为了解决可能出现的全局变量冲突的问题。 **BigInt** 是一种数字类型的数据,它可以表示任意精度格式的整数,使用 BigInt 可以安全地存储和操作大整数,即使这个数已经超出了 Number 能够表示的安全整数范围。 堆: 存放引用数据类型,引用数据类型占据空间大、大小不固定。如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址,如Object、Array、Function。栈: 存放原始数据类型,栈中的简单数据段,占据空间小,属于被频繁使用的 ...
项目复盘
未读cst-exam项目基本架构:123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475src/├── routes/ # 页面级路由│ ├── login/ # 学生登录页 -> /login│ │ └── +page.svelte│ ││ ├── teacher/ # 教师模块 -> /teacher│ │ ├── login/ # 教师登录页│ │ ├── 其他页面/ # 教师子页面(例如试卷、成绩等)│ │ ├── +page.svelte│ │ ├── +error.svelte│ │ └── + ...
react安装react项目: 1npx create-react-app your-project-name 启动项目: 1npm start jsx: JSX(JavaScript XML)是一种在 React 中使用的语法扩展,它看起来很像 HTML,但实际上是 JavaScript 的一种语法糖。JSX 使得编写和读取组件的结构更加直观,就是 JavaScript 和 html 的缩写. 可以在 js 代码中编写 html 代码 jsx 不能在浏览器中进行运行,而是需要一个解析工具进行解析之后才能够进行运行 语法通过{}的形式来展示数据 12345678910111213141516const username = "admin";const numbwe = 123function App() { return ( <div className="App"> {username} {numbwe} {' ...
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link href="https:// ...
1. 概述 Svelte 是一个前端框架,专注于编译时优化,区别于 React 和 Vue,它通过在编译时将组件转化为高效的 JavaScript 代码,消除了虚拟 DOM 的性能开销。 响应性:数据变化会直接影响视图,Svelte 利用编译时的静态分析自动处理组件的更新和重新渲染。 无框架运行时:Svelte 生成的代码没有框架运行时,这使得生成的应用体积小、性能高。 2. 基础概念 Svelte 文件:每个组件是一个 .svelte 文件,包含三个部分:HTML、JavaScript、CSS。 HTML:组件的结构和模板。 JavaScript:组件的逻辑和数据。 CSS:样式表,支持局部样式。 组件:Svelte 的应用由多个组件组成,每个组件是独立的封装单元。组件间可以通过 props、events 和 store 进行交互。 编译过程:在开发时,Svelte 会将 .svelte 文件中的代码转化为高效的 JavaScript,减少运行时依赖,减少浏览器负担。 3. 响应式设计 响应式声明(Reactivity):Svelte 使用编译时的响应式语法,不需要手动管理依 ...
###全局属性 app.json 配置文件结构 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778{ "pages": [ "pages/index/index", // 启动页,进入小程序时首先展示的页面 "pages/logs/logs" // 第二个页面,通常用于展示日志或其他信息 // ...... ], "window": { "navigationBarBackgroundColor": "#ffffff", // 导航栏背景色,通常设置为白色或主题色 "navigationBarTitleText": "我的小程序", ...