当前位置：首页 > news >正文

UI自动化测试框架playwright--初级入门

news 来源：原创 2025/7/3 9:50:11

一、背景：UI自动化的痛点：

1、设计脚本耗时：

需要思考要如何模拟用户的操作，如何触发页面的事件，还要思考如何设计脚本，定位和操作要交互的元素、路径、位置，再编写代码逻辑，往复循环数次，要不停在浏览器和代码编辑器中进行切换。

2、调试脚本耗时：

初步完成元素定位和操作的脚本后，还要一一进行测试验证程序运行是否符合预期，要反复进行调试。

3、维护成本较高：

面向用户的界面的迭代变化频率较高，基于界面元素构建的测试脚本也要跟着变，那么我们面临的就是不停的更新维护既有的UI自动化脚本

思考：如何可以不用考虑定位元素、不用手写代码、并且降低维护成本地完成UI自动化流程？

二、简介与安装

1、介绍-特点

Playwright是一个由微软开发的自动化测试框架，通过“录制为主，编写为辅”的方式来完成测试脚本。

1）playwright的优点

1）支持所有主流浏览器
•支持所有主流浏览器：基于Chromium内核的Chrome 和 Edge浏览器, WebKit内核的Safari 和 Firefox浏览器。
•支持跨平台：Windows、Linux 和macOS
•可用于模拟移动端WEB应用的测试，不支持在真机上测试。
•支持无头模式（默认）和有头模式2）快速可靠的执行
•自动等待元素（默认30s）
•Playwright基于Websocket协议，可以接受浏览器（服务端）的信号，也可在后台服务器完成。selenium采用的是HTTP协议，只能客户端发起请求。
•浏览器上下文并行：单个浏览器实例下创建多个浏览器上下文，每个浏览器上下文可以处理多个页面。
•有弹性的元素选择：可以使用文本、可访问标签选择元素。3）强大的自动化能力
•playwright不受页面内JavaScript执行范围的限制，可以自动化控制多个页面。
•自动生成测试代码：Playwright提供了一个CLI工具，可以记录用户在浏览器中的操作，并生成相应的测试代码。
•强大的网络控制：Playwright 引入了上下文范围的网络拦截来存根和模拟网络请求。
•现代web特性：支持Shadow DOM选择，元素位置定位，页面提示处理，Web Worker等Web API。
•覆盖所有场景：支持文件下载、上传、输入、点击，暗黑模式等。
•支持主流编程语言：python、Java、Node.js、C#、.Net等

2）playwright的局限性

1） Playwright不支持旧版Microsoft Edge或IE11。所以对浏览器版本有硬性要求的项目不适用。2） 需要SSL证书进行访问的网站可能无法录制，该过程需要单独定位编写。3） 移动端测试是通过桌面浏览器来模拟移动设备，无法控制真机。4） Playwright的社区规模相对较小，可能会导致在解决问题时的资源有限

3）与传统的selenium对比

2、安装playwright

建议使用镜像，不然比较慢

pip install playwright -i https://pypi.tuna.tsinghua.edu.cn/simple

安装成功

3、安装浏览器环境

此命令会一次性安装Chromium, Firefox 和 WebKit 内置浏览器，playwright就是通过这些浏览器操作web应用

playwright install

三、UI脚本录制：

1、录制脚本

在控制台，通过codegen命令，使用playwright进行脚本录制

#默认使用Chromium
playwright codegen URL#指定浏览器：
playwright codegen -- browser firefox URL#录制脚本自动保存到本地
playwright codegen -o D:\demo.py -b chromium URL
-o 生成自动化脚本的目录（默认地址为cmd运行命令的地址）
-b 指定浏览器驱动

示例：

2、录制浏览器操作-自动生成脚本

playwright codegen https://www.baidu.com/

3、生成的脚本语言种类

支持自动生成：python、Java、Node.js、C#、.Net等编程语言

四、UI自动化结合接口自动化使用

通过调用提供出的接口，可以做UI自动化的前置或者后置的造数、清数、设置mock，以及调用各业务线维护的P0级用例等等均可

1、接口的token

2、示例

使用 Playwright 框架模拟了一个 POST 请求，完成接口的调用，在发起放款流程前，清除在途贷款单。

plywright本身也可以应用在接口自动化

五、UI自动化断言

page = browser.new_page(timeout=60000)  # 设置 timeout 为 60 秒
page.goto("https://example.com", wait_until="networkidle")  # 使用 waitUntil将等待网络请求停止后再继续执行

1、自动断言

playwright本身支持自动生成对元素的基本断言代码，例如：元素是否可见、元素的文本是否匹配、元素的属性值是否一致、元素的快照等

2、常用的用于断言方法

对页面文本断言、对元素断言 ,对URL断言

    # 断言页面标题expect(page).to_have_title("Example Domain")# 断言 h1 文本内容expect(page.locator('h1')).to_have_text('Example Domain')# 断言元素可见expect(page.locator('text="More information..."')).to_be_visible()# 断言元素不可见# 假设页面上有一个隐藏的元素，ID为hidden-element# expect(page.locator('#hidden-element')).not_to_be_visible()# 断言元素属性# 假设页面上有一个按钮，ID为submit-button，其属性为disabled# expect(page.locator('#submit-button')).to_have_attribute('disabled', 'true')# 断言元素数量# 假设页面上有三个div元素，类名为item# expect(page.locator('div.item')).to_have_count(3)# 断言 URLexpect(page).to_have_url('https://example.com')# 断言输入框的值# 假设页面上有一个输入框，名称为username，其值为testuser# expect(page.locator('input[name="username"]')).to_have_value('testuser')# 断言元素的 CSS 属性# 假设页面上有一个按钮，其背景颜色为rgb(0, 123, 255)# expect(page.locator('button')).to_have_css('background-color', 'rgb(0, 123, 255)')# 断言元素可编辑# 假设页面上有一个输入框# expect(page.locator('input')).to_be_editable()# 断言复选框已选中# 假设页面上有一个复选框# expect(page.locator('input[type="checkbox"]')).to_be_checked()

六、截图比对

可以对页面、元素等，进行截图并比对

1、图像比对方法：

本次介绍的图片比对方法：ImageChops.difference（）需要引入pillow库，pip install pillow原理：将图像数据转换为 Image 对象，然后使用像素值进行比较1）图像对齐：首先，该方法会对齐两幅图像的大小和位置。如果两幅图像的大小不同，较小的图像会被扩展到与较大图像相同的大小。如果它们的位置不同，difference() 会尝试将它们对齐到相同的位置。2）像素值比较：然后，对于每个对应的像素点，该方法会计算它们的RGB值之间的差异。也就是计算每个通道（红、绿、蓝）中像素值的绝对差异，并将这些差异值合并成一个新的像素值。3）差异图像生成：最后，该方会创建一个新的图像：差异图像，其中每个像素的值表示了原始图像中对应像素的差异程度。差异图像通常显示为黑白图像，白色表示两个图像在该位置完全不同，黑色表示它们完全相同。

图像比对方法介绍：

选择哪种方法取决于你的具体需求和图像特性。

如果需要非常精确的对比，像素级对比可能是最好的选择；

如果你希望对比结果更符合人类视觉感知，SSIM 或 EMD 可能更合适。

1）Pillow (PIL)：提供了基本的图像处理功能，包括像素级对比。
2）imagehash：实现了 Perceptual Hashing 算法。
3）scikit-image：提供了 SSIM 和其他图像相似性度量的计算函数。
4）pyemd：实现了 Earth Mover's Distance 算法。
5）TensorFlow 或 PyTorch：可以使用这些深度学习框架来构建和训练自己的图像对比模型。

2、截取某个元素

#定位元素
element = page.get_by_role("button", name="立即登录")# 对元素进行截图
screenshot = element.screenshot()

3、截取页面

#打开页面
page.goto('https://www.baidu.com/')#截取页面
page.screenshot(path='page.png')

4、比对方式

1）本地图片与测试流程中图片比对：

  #在URL页面中截图page1page.goto("URL1")page.screenshot(path='page1.png')image1 = Image.open('page1.png')#在本地通过绝对路径获取图片2image2 = Image.open('local path')diff = ImageChops.difference(image1, image2)if diff.getbbox():print("The two pages are different.")else:print("The two pages are same.")

2）测试流程中图片比对：

    page.goto("URL1")page.screenshot(path='page1.png')page.goto("URL2")page.screenshot(path='page2.png')image1 = Image.open('page1.png')image2 = Image.open('page2.png')diff = ImageChops.difference(image1, image2)if diff.getbbox():print("The two pages are different.")else:print("The two pages are same.")

七、模拟移动端

1、说明

playwright支持模拟特定设备的浏览器行为，例如用户代理、屏幕尺寸、视口以及是否启用了触摸。所有测试都将使用指定的设备参数运行。

2、示例：

通过配置UA结合device模拟移动端，小贷日常用于移动端测试、用户鉴权等场景

browser = playwright.chromium.launch(headless=False)
# browser2 = playwright.chromium.launch(channel='chrome', args=['--device', 'iPhone 15 Pro Max'])mobile_context = browser.new_context(user_agent="Mozilla/5.0 (iPhone; CPU iPhone OS 16_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148/application=JDJR-App&clientType=ios&iosType=iphone&clientVersion=6.8.70&HiClVersion=6.8.60&isUpdate=0&osVersion=16.6.1&osName=iOS&screen=932*430&src=App Store&netWork=2&netWorkType=5&CpayJS=UnionPay/1.0 JDJR&stockSDK=stocksdk-iphone_4.2.3&sPoint=&jdPay=(*#@jdPaySDK*#@jdPayChannel=jdfinance&jdPayChannelVersion=6.8.60&jdPaySdkVersion=4.01.17.00&jdPayClientName=iOS*#@jdPaySDK*#@)",viewport={'width': 400, 'height': 700})page2 = mobile_context.new_page()

八、可视化测试报告输出

1、allure下载与安装

allure下载地址：Central Repository: io/qameta/allure/allure-commandline

需要配置环境变量

一切安装好之后，在cmd里面查看安装的版本号

allure --version

2、安装依赖

pip install -i https://pypi.douban.com/simple allure-pytest
npm install -g allure-playwright@2.13.5

3、应用

用例文件里分层标识信息

标题：
@allure.title("用例标题")步骤：
with allure.step("执行步骤"):描述：
def test_function（）：'''描述'''

main文件里使用

# 获得测试结果，并以allure的数据格式保留下来
1）pytest.main(["--alluredir", "allure_result", "--clean-alluredir","test_loan_pc_old.py"])•["--alluredir", "allure_result"] 表示将测试结果保存在 allure_result 文件夹中，用于后续生成报告。
•["--clean-alluredir"] 表示在运行测试之前，清空 allure_result 文件夹中的内容，避免与上一次测试的结果混淆。
•["test_loan_pc_old.py"] 指定要运行的测试用例文件名。# 通过allure的数据，进行报告的生成
2）allure generate --clean ./allure_result -o ./allure_report
根据 allure_result 的数据生成测试报告，并将报告保存在 allure_report 文件夹中
--clean 选项表示在生成报告之前清空 allure_result 文件夹中的内容。

4、运行结果

自动化脚本里面，对断言失败和用例执行情况进行可视化输出

1）一成功，一失败

对断言失败和用例执行情况进行可视化输出

2）用例执行均成功

九、PO模式

UI自动化测试框架playwright--初级入门

一、背景：UI自动化的痛点： 1、设计脚本耗时： 需要思考要如何模拟用户的操作，如何触发页面的事件，还要思考如何设计脚本，定位和操作要交互的元素、路径、位置，再编写代码逻辑，往复循…...

编程日记 2025/7/3 9:50:11

算法 -归并排序

博客主页：【夜泉_ly】本文专栏：【算法】欢迎点赞👍收藏⭐关注❤️ 文章目录 🔀 归并排序📖 简介🖼️ 示意图💡 实现思路💻 代码实现💡 实现思路2 - 非递归&#x1f4bb…...

编程日记 2025/7/3 9:35:42

基于html5实现音乐录音播放动画源码

源码介绍基于html5实现音乐录音播放动画源码是一款类似Shazam的UI，点击按钮后，会变成为一个监听按钮。旁边会有音符飞入这个监听按钮，最后转换成一个音乐播放器。效果预览源码获取基于html5实现音乐录音播放动画源码...

编程日记 2025/7/3 9:14:51

NRC优先级中比较特殊的—NRC0x13和NRC0x31

1、基础知识大家都了解 NRC0x13，表示长度错误和格式错误 NRC0x31，表示DID不支持和数据格式不支持 2、为什么说这两个NRC比较特殊看下图的标注部分： 2.1、先看NRC0x13 步骤一：仔细看是先判断Minmun Length Check &#xff0…...

编程日记 2025/7/2 7:17:06

文件的介绍4

一、文件的随机读写 1.fseek I 从左往右第一个参数 stream 是一个指向已经被打开的文件流的指针第三个参数 origin 是个常量，指定从哪个位置开始偏移，它的取值： SEEK_SET：从文件开头开始偏移。SEEK_CUR：从当前…...

编程日记 2025/7/3 8:56:30

Mysql - 多表连接和连接类型

在关系型数据库中，多表连接（JOIN）是用于从多个表中检索数据的常用操作。通过连接多个表，可以将分散在不同表中的相关数据组合在一起，从而进行更复杂的查询和分析。在这篇文章中，我们将深入探讨MySQL中的多表…...

编程日记 2025/7/2 15:26:39

Tableau数据可视化与仪表盘搭建-可视化原则及BI仪表盘搭建

目录可视化原则 BI仪表盘搭建仪表盘搭建原则明确仪表盘主题仪表盘主题拆解开发设计工作表经营情况总览：突出显示的文字经营数据详情：表格每日营收数据：多轴折线图每日流量数据：双轴组合图新老客占比&#xf…...

编程日记 2025/7/2 13:04:14

如何制作一份出色的公司介绍PPT？

制作一份公司介绍的PPT需要精心设计，以确保内容既专业又吸引人。以下是一个基本的框架和一些建议，帮助您创建一份有效的公司介绍PPT： PPT标题页标题：公司全称（可使用公司Logo作为背景或嵌入标题中）副标题…...

编程日记 2025/7/3 8:31:02

【Arm】Arm 处理器的半主机（semihosting）机制

概览通过 semihosting 机制，主机可以通过调试器使用目标计算机 IO 接口。例如开发者的 PC 通过 J-Link 来使用 STM32 MCU 的输入输出。这些功能的示例包括键盘输入、屏幕输出和硬盘 I/O。例如，可以使用此机制启用 C Library 中的函数，如…...

编程日记 2025/7/2 13:51:45

C语言基本知识复习浓缩版：输出函数printf

输出函数printf学习 printf()的作用是将文本输出到屏幕上使用之前需要先引入stdio.h头文件printf函数在使用的时候，至少需要一个参数 printf() 是 C 语言标准库中的一个函数，用于将格式化的文本输出到标准输出设备（通常是屏幕）。…...

编程日记 2025/7/3 8:36:57

pygame飞机大战

飞机大战 1.main类2.配置类3.游戏主类4.游戏资源类5.资源下载6.游戏效果 1.main类启动游戏。 from MainWindow import MainWindow if __name__ __main__:appMainWindow()app.run()2.配置类该类主要存放游戏的各种设置参数。 #窗口尺寸 #窗口尺寸 import random import p…...

编程日记 2025/7/3 9:40:41

WebRTC：构建实时通信应用的利器

都已无处不在。而 WebRTC（Web Real-Time Communication）则为开发者提供了一种简便的方式，来在浏览器中实现实时的音视频通信和数据传输。本文将介绍 WebRTC 的基本概念、工作原理，以及如何利用 WebRTC 构建实时通信应用。什么是…...

编程日记 2025/7/3 9:18:47

个人博客搭建(二)—Typora+PicGo+OSS

个人博客站—运维鹿: http://www.kervin24.top CSDN博客—做个超努力的小奚： 做个超努力的小奚-CSDN博客一、前言博客搭建完一直没有更新，因为WordPress自带的文档编辑器不方便，以前用CSDN写作的时候，习惯了Typora。最近对比了…...

编程日记 2025/7/1 15:11:09

华纳云：在centos7中tomcat内存怎么设置？

在 CentOS 7 中，可以通过修改 Tomcat 的启动脚本来调整 Tomcat 的内存设置。Tomcat 的内存配置主要涉及 JVM 参数(Java Virtual Machine)，可以通过设置 -Xms(初始内存)和 -Xmx(最大内存)来调整内存大小。步骤如下： 1. 修改 Tomcat 启动脚本 …...

编程日记 2025/7/2 9:44:34

樱桃键盘win键按了没反应怎么处理

‌游戏模式‌：部分樱桃键盘在进入游戏模式后会禁用Win键，以防止在游戏过程中误触。可以通过按下Fn F9键来切换游戏模式和办公模式，确保键盘处于办公模式下，Win键即可恢复正常功能。‌ （至此我的问题已解决&#xff0c…...

编程日记 2025/7/2 20:21:21

【UE5 C++课程系列笔记】23——多线程基础——AsyncTask

目录概念函数说明注意事项 （1）线程安全问题 （2）依赖特定线程执行的任务限制 （3）任务执行顺序和时间不确定性使用示例概念 AsyncTask 允许开发者将一个函数或者一段代码逻辑提交到特定的线程去执…...

编程日记 2025/6/28 16:45:13

Docker运维高级容器技术知识点总结

1、虚拟机部署和容器化部署的区别是什么？ 1、技术基础： <1>.虚拟化技术在物理硬件上创建虚拟机，每台虚拟机运行自己完整的操作系统、从而实现资源隔离。 <2>.容器化技术：将应用程序打包在容器内，在进程空间…...

编程日记 2025/6/28 13:57:47

Docker的安装和使用

容器技术容器与虚拟机的区别虚拟机 (VM) VM包含完整的操作系统，并在虚拟化层之上运行多个操作系统实例。 VM需要更多的系统资源（CPU、内存、存储）来管理这些操作系统实例。容器 (Container) 容器共享主机操作系统的内核，具…...

编程日记 2025/7/2 15:04:23

Java语法总结

Java的数据类型分为基本数据类型和引用数据类型。 1.基本数据类型：四类八种 byte 和short 比较特殊，不必考虑int类型，只关注是否超出了表示范围。数据超出了int的范围，改正：在后边添加L ，定义变量报错…...

编程日记 2025/7/2 14:57:29

Linux文件系统的安全保障---Overlayroot！

overlayroot 是一种使用 OverlayFS 实现的功能，可将根文件系统挂载为只读，并通过一个临时的写层实现对文件系统的修改。这种方法非常适合嵌入式设备或需要保持系统文件完整性和安全性的场景。下文以 RK3568 平台为例，介绍制作 overlayroot 的…...

编程日记 2025/7/2 15:38:37

net-http-transport 引发的句柄数（协程）泄漏问题

Reference 关于 Golang 中 http.Response.Body 未读取导致连接复用问题的一点研究https://manishrjain.com/must-close-golang-http-responsehttps://www.reddit.com/r/golang/comments/13fphyz/til_go_response_body_must_be_closed_even_if_you/?rdt35002https://medium.co…...

编程日记 2025/7/3 9:13:54

Elasticsearch：在 HNSW 中提前终止以实现更快的近似 KNN 搜索

作者：来自 Elastic Tommaso Teofili 了解如何使用智能提前终止策略让 HNSW 加快 KNN 搜索速度。在高维空间中高效地找到最近邻的挑战是向量搜索中最重要的挑战之一，特别是当数据集规模增长时。正如我们之前的博客文章中所讨论的，当数据集规模…...

编程日记 2025/6/30 1:25:45

嵌入式c语言的内存管理

目录一、内存布局概述二、栈（Stack） 2.1. 定义与用途 2.2. 内存分配与释放 2.3. 增长方向与大小限制三、堆（Heap） 3.1. 定义与用途 3.2. 内存分配与释放 3.3. 增长方向与潜在问题四、全局/静态存储区 4.1. 定义与用…...

编程日记 2025/7/3 9:39:33

uniapp-vue3 实现, 一款带有丝滑动画效果的单选框组件,支持微信小程序、H5等多端

采用 uniapp-vue3 实现, 是一款带有丝滑动画效果的单选框组件，提供点状、条状的动画过渡效果，支持多项自定义配置，适配 web、H5、微信小程序（其他平台小程序未测试过，可自行尝试） 可到插件市场下载尝试&…...

编程日记 2025/7/2 21:23:23

【Linux】shell脚本编程

目录概念： shell脚本的本质： shell脚本编程： shell变量： 变量的定义格式： 变量的分类自定义变量： 环境变量： 命令变量与命令行参数： 预定义变量： shell中的…...

编程日记 2025/7/2 23:13:42

ingress-nginx-controller安装

ingress-nginx-controller安装 ingress-nginx-controller是配置ingress发布的基础。以下主要采用Helm安装。地址： GitHub - kubernetes/ingress-nginx: Ingress NGINX Controller for Kubernetes 1 Helm安装安装不难，需要找到合适的压缩包就行。我自…...

编程日记 2025/7/2 14:39:16

机器学习基础-机器学习的常用学习方法

目录半监督学习的概念规则学习的概念基本概念机器学习里的规则逻辑规则规则集充分性与必要性冲突消解命题逻辑 → 命题规则序贯覆盖单条规则学习剪枝优化强化学习的概念 1. 强化学习对应了四元组 2. 强化学习的目标强化学习常用马尔可夫决策过程…...

编程日记 2025/7/2 16:28:43

如何在Windows 11 WSL2 Ubuntu 环境下安装和配置perf性能分析工具？

在Windows 11 WSL2 Ubuntu 环境下完整安装和配置perf性能分析工具一、背景二、准备工作三、获取并编译Linux内核源码四、安装和配置perf五、测试perf六、总结一、背景由于WSL2使用的是微软定制的内核，并非标准的Ubuntu内核，因此直接使用apt安装linux…...

编程日记 2025/7/2 16:28:14

人工智能知识分享第十天-机器学习_聚类算法

聚类算法 1 聚类算法简介 1.1 聚类算法介绍一种典型的无监督学习算法，主要用于将相似的样本自动归到一个类别中。目的是将数据集中的对象分成多个簇（Cluster），使得同一簇内的对象相似度较高，而不同簇之间的对象相…...

编程日记 2025/7/2 14:23:23

使用wav2vec 2.0进行音位分类任务的研究总结

使用wav2vec 2.0进行音位分类任务的研究总结原文名称： Using wav2vec 2.0 for phonetic classification tasks: methodological aspects 研究背景自监督学习在语音中的应用自监督学习在自动语音识别任务中表现出色，例如说话人识别和验证。变换器模型…...

编程日记 2025/7/2 18:23:17

【Leetcode 热题 100】33. 搜索旋转排序数组

问题背景整数数组 n u m s nums nums 按升序排列，数组中的值互不相同。在传递给函数之前， n u m s nums nums 在预先未知的某个下标 k ( 0 ≤ k < n u m s . l e n g t h ) k(0 \le k \lt nums.length) k(0≤k<nums.length) 上进行了旋转&…...

编程日记 2025/7/1 8:04:51

【VScode】设置代理，通过代理连接服务器

文章目录 VScode编辑器设置代理1.图形化界面1.1 进入proxy设置界面1.2 配置代理服务器 2.配置文件（推荐）2.1 打开setting.json 文件2.2 配置代理 VScode编辑器设置代理根据情况安装nmap 1.图形化界面 1.1 进入proxy设置界面或者使用快捷键ctrl , 。…...

编程日记 2025/7/2 10:07:55

每日一题-两个链表的第一个公共结点

文章目录两个链表的第一个公共结点问题描述示例说明示例 1示例 2 方法及实现方法描述代码实现复杂度分析示例运行过程示例 1示例 2 总结备注两个链表的第一个公共结点问题描述给定两个无环的单向链表，找到它们的第一个公共节点。如果没有公共节点&#xff0c…...

编程日记 2025/7/3 9:23:45

Linux存储管理之核心秘密(The Core Secret of Linux Storage Management)

Linux存储管理之核心秘密如果你来自Windows环境，那么Linux处理和管理存储设备的方式对你而言可能显得格外不同。我们知道，Linux的文件系统并不采用Windows那样的物理驱动器表示方式（如C:、D:或E:），而是构建了一个以&…...

编程日记 2025/6/30 19:47:08

js单例模式

保证一个类只有一个实例,并提供一个访问它的全局访问点实现静态方法实现 class SingleTon{//全局的访问点static getInstance(){// 保证一个类只有一个实例if(!this.instance){this.instancenew SingleTon()}return this.instance}}let aSingleTon.getInstance()let bSing…...

编程日记 2025/7/3 9:49:12

搭建一个本地轻量级且好用的学习TypeScript语言的环境

需求说明虽然 TypeScript 的在线 Playground 很方便 https://www.tslang.com.cn/play/，但毕竟是在浏览器中使用，没有本地的 IDE 那么顺手。所以我想搭建一个本地类似 Playground 的环境，这样在学习 TypeScript 的过程中，可以更方…...

编程日记 2025/7/3 9:27:28

大模型（LLM）面试全解：主流架构、训练目标、涌现能力全面解析

系列文章目录大模型（LLMs）基础面 01-大模型（LLM）面试全解：主流架构、训练目标、涌现能力全面解析大模型（LLMs）进阶面文章目录系列文章目录大模型（LLMs）基础面一、目…...

编程日记 2025/7/2 2:21:50

入门嵌入式（七）——PWM

PWM 脉冲宽度调制PWM（Pulse-Width Modulation） 一组方波周期 1ms 频率 1s / 周期占空比高电平/周期数字信号：0/1高低电平串口 IIC PWM都属于数字信号模拟信号：电压值， 会受到电磁影响 ADC 模数转换用于读取…...

编程日记 2025/7/2 3:10:43

Flutter 实现列表滑动过程控件停靠效果学习

实现一个 Flutter 应用程序，使用 Sliver 系列组件来创建具有滚动效果的复杂布局。使用 NestedScrollView 和 SliverPersistentHeader 来实现固定和动态的头部效果，以及一个可滚动的列表。前置知识点学习 SingleTickerProviderStateMixin SingleTicker…...

编程日记 2025/7/1 10:25:22

STM32+WIFI获取网络时间+8位数码管显示+0.96OLED显

资料下载地址：STM32WIFI获取网络时间8位数码管显示0.96OLED 1、项目介绍主控芯片STM32C8T6 接线：串口1：PA9 PA10 OELD ：PB6 PB7 数码管使用：MAX7219 8位数码管 Max7219_pinCLK PAout(5) Max7219_pinC…...

编程日记 2025/7/2 5:54:41

Kivy App开发之UX控件Slider滑块

在app中可能会调节如音量，亮度等，可以使用Slider来实现，该控件调用方便，兼容性好，滑动平稳。在一些参数设置中，也可以用来调整数值。支持水平和垂直方向，可以设置默认值，最小及最大值。使用方法，需用引入Slider类，通过Slider类生成一个滑块并设置相关的样式后，再…...

编程日记 2025/7/1 21:35:17

STM32学习（十）

I2C模块内部结构 I2C（Inter-Integrated Circuit）模块是一种由Philips公司开发的二线式串行总线协议，用于短距离通信，允许多个设备共享相同的总线‌。 ‌硬件连接简单‌：I2C通信仅需要两条总线，即SCL&…...

编程日记 2025/7/2 17:59:23

何为“正则表达式”！

详细解释： ^：在JSON的正则表达式中，^表示匹配输入字符串的开始位置。这意味着正则表达式将从字符串的开头开始进行匹配，确保整个字符串符合后续的模式要求。例如，对于字符串"3.14"，正则表达式会…...

编程日记 2025/6/28 16:20:49

创建Java项目，并添加MyBatis包和驱动包

一 : Mybatis和jsp使用上,只有Dao层有区别 Mybatis 使用方法: 测试类的7步骤 1.读取核心配置文件 2.构建sql会话工厂 3.开启sql会话 4.获取mapper接口 5.调用相对应的增删改查方法 6.打印 7.关闭回话 /*** 用户列表* throws IOException*/Testpublic void roleList() throws IO…...

编程日记 2025/7/2 14:38:47

目标检测文献阅读-DETR：使用Transformer进行端到端目标检测

目录摘要 Abstract 1 引言 2 DETR结构 2.1 Backbone 2.2 Encoder 2.3 Decoder 2.4 FFN 3 目标检测集合预测损失 3.1 二分图匹配损失 3.2 损失函数总结摘要本周阅读的论文题目是《End-to-End Object Detection with Transformers》(使用Transformer进行端到端目…...

编程日记 2025/7/3 8:28:51

C#里对已经存在的文件进行压缩生成ZIP文件

先要对目录下所有文件获取到： private List<string> GetXDFiles(string dirPath){//获取目录中的所有文件string suffix = "*.txt"; // 要查找的文件后缀var files = Directory.GetFiles(dirPath, suffix, SearchOption.TopDirectoryOnly).ToList();return fi…...

编程日记 2025/7/2 20:30:37

单片机软件定时器V4.0

单片机软件定时器V4.0 用于单片机定时执行任务等，比如LED GPIO等定时控制，内置前后台工作模式头文件有使用例子 #ifndef __SORFTIME_APP_H #define __SORFTIME_APP_H#ifdef __cplusplus extern "C" { #endif#include <stdint.h>// #…...

编程日记 2025/6/30 12:27:35

【嵌入式硬件】嵌入式显示屏接口

数字显示串行接口（Digital Display Serial Interface） SPI 不过多赘述。 I2C-bus interface 不过多赘述 MIPI DSI MIPI (Mobile Industry Processor Interface) Alliance, DSI (Display Serial Interface) 一般用于移动设备，下面是接口…...

编程日记 2025/6/30 18:19:02

vuedraggable 选项介绍

vuedraggable 是基于 SortableJS 的 Vue 组件，提供了丰富的选项来定制拖拽行为。以下是 vuedraggable 常用的选项和它们的详细说明： 常用选项介绍 group 配置拖拽分组。多个列表可以共享同一个分组，允许它们之间的项目互相拖拽。 group: { na…...

编程日记 2025/7/2 15:24:54

OpenAI CEO 奥特曼发长文《反思》

OpenAI CEO 奥特曼发长文《反思》 --- 引言：从 ChatGPT 到 AGI 的探索 ChatGPT 诞生仅一个多月，如今我们已经过渡到可以进行复杂推理的下一代模型。新年让人们陷入反思，我想分享一些个人想法，谈谈它迄今为止的发展，…...

编程日记 2025/7/2 16:27:44