Dify Chatflow工作流中对接业务接口记录（一）

# Dify Chatflow 踩坑记录：通过 API 调用时，如何获取自定义 inputs 参数

## 一、需求背景

目前正在基于dify平台搭建一个对接公司考勤接口的考勤记录查询智能体。目前采用开发提供的mock接口，本人负责智能体的搭建以及搭建后postman接口调用的调试。





调用流程如下：

```text
Postman
   ↓
Dify Chatflow
   ↓
提取年月
   ↓
HTTP节点
   ↓
调用后端考勤接口
```

后端接口要求：

```http
POST /chat/captcha/get_attshifts

Header:
token: xxxxxxxxxxxxx

Body:
{
    "year":"2026",
    "month":"4"
}
```

其中 `token` 需要从调用 Dify API 时动态传入。

---

## 二、最初方案

### Postman 请求

```json
{
    "inputs":{
        "token":"a9af8fdae7ab0c857b3dfab709d14XXX"
    },
    "query":"我要查2026年4月考勤记录",
    "response_mode":"streaming",
    "conversation_id":"",
    "user":"demo-1231",
    "files":[]
}
```

### Dify 开始节点

配置了：

```
user_id
```

HTTP节点中使用：

```text
{{开始节点.user_id#}}
```

结果：

始终获取不到值。

---

## 三、第一次误区

最开始怀疑：

* HTTP节点变量引用错误
* Postman 未传递参数
* Dify API 不支持 inputs

于是查看：

```
workflow_started
```

返回内容：

```json
{
    "inputs": {
        "sys.files": [],
        "sys.user_id": "demo-1231",
        "sys.query": "我要查2026年4月考勤记录"
    }
}
```

发现：

只有：

```
sys.user_id
```

没有：

```
user_id
```

也没有：

```
token
```

---

## 四、真正原因

### （1）inputs 参数名必须与开始节点完全一致

开始节点：

```
user_id
```

Postman：

```json
{
    "inputs":{
        "token":"xxxxxxxx"
    }
}
```

二者名称不同。

Dify 不会自动映射：

```
token
≠
user_id
```

因此：

```
inputs.token
    ↓
开始节点没有对应参数
    ↓
直接丢弃
```

---

### （2）修改开始节点后必须重新发布（Publish）

这是本次最大的坑。

很多时候：

```
新增开始节点参数
    ↓
保存
    ↓
直接调用 API
```

实际上：

API 调用的仍然是旧版本工作流。

必须点击：

```
右上角
→ 发布（Publish）
```

否则：

workflow_started 中看不到新增的参数。

---

## 五、正确配置

### 1、开始节点

新增输入变量：

| 参数名     | 类型     |
| ------- | ------ |
| user_id | String |

---

### 2、Postman

```json
{
    "inputs":{
        "user_id":"a9af8fdae7ab0c857b3dfab709d1XXX"
    },
    "query":"我要查2026年4月考勤记录",
    "response_mode":"streaming",
    "conversation_id":"",
    "user":"demo-1231",
    "files":[]
}
```

注意：

```
inputs.user_id
```

必须和开始节点保持一致。

---

### 3、HTTP节点

Header：

```text
token

{{#开始节点ID.user_id#}}
```

建议不要手写。

直接：

```
插入变量
→ 用户输入：直接输入‘/’
→ user_id
```

由 Dify 自动生成变量表达式。

---

## 六、如何快速排查 inputs 是否传入

查看posman streaming 返回的第一个事件：

```json
{
    "event":"workflow_started"
}
```

重点观察：

```json
{
    "data":{
        "inputs":{
            ...
        }
    }
}
```

如果这里没有：

```json
"user_id":"xxxx"
```

说明：

* Postman 参数错误
* 开始节点参数名不一致
* 工作流未重新发布

而不是 HTTP 节点的问题。

---

## 七、本次踩坑总结

### 经验一

Dify 的 `inputs` 完全依赖名称映射：

```
Postman.inputs.xxx
==
开始节点.xxx
```

否则直接丢弃。

---

### 经验二

修改开始节点后：

一定要：

```
保存
+
重新发布（Publish）
```

否则 API 仍调用旧版本。

---

### 经验三

排查 API 参数最有效的方法不是看页面，而是查看：

```
workflow_started
```

事件中的：

```json
data.inputs
```

它能准确告诉你：

工作流真正接收到了哪些参数。

---

## 八、个人建议

以后所有需要外部传参的 Chatflow，建议统一采用：

```text
开始节点：

token
user_id
username
tenant_id
project_id
```

API：

```json
{
    "inputs":{
        "token":"xxx",
        "user_id":"xxx",
        "username":"xxx"
    }
}
```

然后通过「插入变量」引用，而不要手写变量表达式。

这样基本可以避免 90% 的参数传递问题。

---


:::tip{title="提示"}
## Tips：如何判断 Dify 是否真正收到了 inputs 参数？

不要第一时间去看 HTTP 节点。

直接观察 streaming 返回的第一个事件：

workflow_started

查看：

data.inputs

如果这里没有，说明参数压根没进入工作流。

排查顺序：

1. Postman body  
2. 开始节点参数名  
3. 是否重新 Publish
4. HTTP 节点变量引用
:::

Dify Chatflow 踩坑记录：通过 API 调用时，如何获取自定义 inputs 参数

# 前言
&ensp;对playwright所提供的元素的操作方法以及使用的条件进行简单的实践。



# 与HTML输入元素的交互
## 1. 文本输入框的交互：locator.fill()方法适用于以下三种元素类型：
- `<input>`：输入框

```python
    page.goto("https://2x.ant.design/components/input-cn/")
    page.get_by_placeholder("Basic usage", exact=False).fill("2020-02-02")
```
- `<textarea>`：多行文本，文本域。

```python
    page.goto("https://2x.ant.design/components/input-cn/")
    page.get_by_placeholder("Autosize height with minimum and maximum number of lines", exact=False).fill("多行文本")
```
- `[contenteditable]`可编辑元素：富文本/自定义输入框。

## 2. 复选框的选中与取消：locator.set_checked() 适用于三类元素：
- `input[type=checkbox]`：原生的复选框的选中与取消。

```python
    page.goto("https://2x.ant.design/components/checkbox-cn/")
    page.get_by_role("checkbox", name="Checked-Enabled").uncheck()
    page.get_by_role("checkbox", name="Checked-Enabled").check()
    expect(page.get_by_role("checkbox", name="Checked-Enabled")).to_be_checked()
```
- `input[type=radio]`：原生的单选框的选中。
```python
    page.goto("https://2x.ant.design/components/radio-cn/")
    page.locator("#components-radio-demo-radiogroup").get_by_role("radio", name="B").check()
```
- `[role=checkbox]`：ARIA组件。
```python
    page.goto("https://react-aria.adobe.com/CheckboxGroup")
    page.locator("#react-aria-_R_1mbirda_").get_by_text("Soccer").click()
```

## 3. 下拉框选项操纵：locator.set_checked() 只用于原生的 `<select> `元素：

```python
    page.goto("https://react-aria.adobe.com/CheckboxGroup")
    page.locator("#react-aria-_R_1mbirda_").get_by_text("Soccer").click()
```

:::warning{title="注意"}
目前基本都是引入组件的下拉框，很少有原生的。
原生的标准格式如下：
![image.png](/static/img/5a2fa0fc6edba5205252296d0395c220.image.webp)
:::

## 4. 鼠标的点击操作：
### 鼠标的单击操作，点击操作前的可操作性检查包括：
1. 元素必须存在（DOM中）
2. 元素必须可见（非 `display:none`/`visibility:hidden`）
3. 元素必须稳定（动画结束）
4. 自动滚动到视口内
5. 检查是否被遮挡（能否接收 pointer 事件）
6. 执行点击
7. 如果中途 DOM 变化 → 自动重试
```python
    page.goto("https://react-aria.adobe.com/CheckboxGroup")
    # 单击操作
    page.locator("#react-aria-_R_1mbirda_").get_by_text("Soccer").click()
    # 双击操作
    page.get_by_role("button", name="Star").dblclick()
    # 右键
    page.get_by_role("button", name="Star").click(button="right")
    # 也可多个修饰健组合使用如：click(modifiers=["Shift","Ctrl"])。
    page.get_by_role("button", name="Star").click(modifiers=["Shift"])
    
    # 鼠标悬停操作：图标数据的显示、有些下拉框的触发等。
      page.goto("https://2x.ant.design/components/dropdown-cn/")
    page.locator("#components-dropdown-demo-basic").get_by_role("link", name="Hover me ").hover()
    
    # 指定位置点击：地图场景、颜色选择器
     page.goto("https://www.google.com/maps/@36.1951437,138.5483037,10z?entry=ttu&g_ep=EgoyMDI2MDQwNy4wIKXMDSoASAFQAw%3D%3D")
    page.get_by_role("button", name="Star").click(position={ "x": 0, "y": 0})
```


## 5. 文件的上传操作：文件上传是通过`set_input_files()`方法完成的，该方法支持单文件、多文件、目录上传以及清空文件取消文件上传的操作。
### 5.1 单文件的上传

```python
with sync_playwright() as p:
    browser = p.chromium.launch(
        headless=False,
        # args=["--no-proxy-server"]
    )
    page = browser.new_page()
    page.goto("https://2x.ant.design/components/upload-cn/")
    page.locator('input[type="file"]').nth(0).set_input_files("/Users/jingwei/Desktop/截图/Snipaste_2024-03-20_09-40-39.png")
    sleep(5)
    browser.close()
```

### 5.2 多文件的上传：前提条件HTML必须支持`<input type="file" multiple>`，多个文件的路径放在列表中传入方法中，具体示例如下：

```html
# 元素
<input type="file" accept="" multiple="" style="display: none;">
```

```python
    page.goto("https://2x.ant.design/components/upload-cn/")

    page.locator('input[type="file"]').nth(2).set_input_files([
        "/Users/jingwei/Desktop/截图/Snipaste_2024-03-20_09-40-39.png",
        "/Users/jingwei/Desktop/截图/制图/报告文件.png"
    ])
```

### 5.3 清空文件操作，这里的`.set_input_files([])`方法。

我的实践的时候并没有发现实际的效果，建议点击页面真是的删除与清空按钮，具体原因可能是：

- `.set_input_files([])`方法并不会触发浏览器原生的文件取消/清空事件，它只是清空了Playwright内部记录的文件路径，但页面的上传组建通常不会显现这种变化。
- 在大多数情况下input元素是被隐藏的，页面上显示的“已选文件”的信息是JavaScript监听change事件后渲染的。
- `.set_input_files([])`不会触发change事件，即使清空了值，也不一定会触发change事件。
- UI状态的独立：页面上的文件列表、文件名等UI状态是由JavaScript维护的，与input的实际值可能不同步。

### 5.4 内存上传，这里指的是脚本中直接生成虚拟的文件内容，并将其作为文件上传，而不需要读取硬盘上的真实文件，这就是高级的所在。在这里可以根据测试需要，灵活地构造不同的文件类型。


```python
    page.goto("https://2x.ant.design/components/upload-cn/")
    upload = page.locator(
        'input[type="file"]'
    ).nth(0)
    upload.nth(0).set_input_files(
        files=[
            {
                "name": "test.txt", # 文件名
                "mimeType": "text/plain", # 文件类型
                "buffer": b"hello world" # 文件内容
            }
        ]
    )

    sleep(5)

    browser.close()
```

### 5.5 input 被隐藏，我们就当存在`<input type="file">`进行上传操作，我们也可以控制台命令来看看到底是否存在input标签。

```js
document.querySelectorAll('input')
```
这里以课堂派中提交作业功能来进行测试。


```python
    page.goto("https://www.ketangpai.com/#/login")
    print("the page title is {}".format(page.title()))
    page.fill('//input[@placeholder="请输入邮箱/手机号/账号"]', "")
    page.fill('//input[@placeholder="请输入密码"]', "")
    page.click('//button[./span="登录"]')
    page.wait_for_timeout(5)
    course = page.locator(
        '.header-info',
        has_text="网络安全高级课程2301"
    ).first
    course.click()
    sleep(5)
    page.get_by_text("作业").click()
    with page.context.expect_page() as new_page_info:
        page.get_by_text("w58-rce-23.6.21").click()

    new_page = new_page_info.value

    # 等待新页面加载完成
    new_page.wait_for_load_state()

    # 后续全部操作新页面
    new_page.get_by_text("提交作业").click()

    new_page.locator('input[type="file"]').set_input_files(
        "/Users/jingwei/Desktop/截图/制图/报告文件.png"
    )
    new_page.get_by_role("button", name="确认提交").click()
    new_page.get_by_role("button", name="确定").click()
    sleep(5)
    page.close()
```

## 6. 页面的滚动操作。
### 6.1 大多数情况下不需要手动滚动，元素不在可视区域时Playwright会自动滚动到可视区域。

### 6.2 手动滚动，借助`scroll_into_view_if_needed()`方法。


```python
    page.goto("https://www.ketangpai.com/#/login")
    print("the page title is {}".format(page.title()))
    page.fill('//input[@placeholder="请输入邮箱/手机号/账号"]', "")
    page.fill('//input[@placeholder="请输入密码"]', "")
    page.click('//button[./span="登录"]')
    page.wait_for_timeout(5)
    page.locator('h3:has-text("2020-2021 第一学期")').scroll_into_view_if_needed()
    sleep(5)
```

### 6.3 更加精确的鼠标滚轮滚动，`.mouse.wheel()`。


```python
    page.locator('h2:has-text("置顶课程")').scroll_into_view_if_needed()
    page.locator('h2:has-text("置顶课程")').hover()
    page.mouse.wheel(0, 100)
```

# 涉及资料
[Playwright for Python官方文档](https://playwright.dev/python/docs/input)

Playwright:元素操作方法

# 前言
&ensp;playwright有自己强大的内置定位器，也支持传统的Xpath与CSS定位，本次以[课堂派登录页](https://www.ketangpai.com/#/login)为例子进行详细的定位方法测试。



# 一. 内置定位器

### 1. page.get_by_role(role, **options)通过显式和隐式辅助功能属性定位，返回的是一个Locator 对象
#### (1).参数role：元素在 Accessibility Tree 中的角色
    
    常见的role类型，如下：
    
    | role     | HTML示例                    | 说明    |
    | -------- | ------------------------- | ----- |
    | button   | `<button>`                | 按钮    |
    | link     | `<a>`                     | 链接    |
    | textbox  | `<input>` / `<textarea>`  | 文本输入框 |
    | checkbox | `<input type="checkbox">` | 复选框   |
    | radio    | `<input type="radio">`    | 单选框   |
    | combobox | `<select>`                | 下拉框   |
    | heading  | `<h1>`~`<h6>`             | 标题    |
    | dialog   | `<dialog>` / modal        | 弹窗    |
    | img      | `<img>`                   | 图片    |
    | table    | `<table>`                 | 表格    |
    

#### (2).参数name：可访问的元素的名称
    
    可访问文本的标签优先级：
    
    | 优先级 | 来源                           |
    | --- | ------------------------------- |
    | 1   | `aria-labelledby`               |
    | 2   | `aria-label`                    |
    | 3   | `<label>` 标签                   |
    | 4   | 元素文本内容                      |
    | 5   | 其他控件如：placeholder           |
则根据上述两点，账号输入框、密码输入框、登录按钮定位表达式如下：
```python
page.get_by_role("textbox", name="请输入邮箱/手机号/账号").fill("")
page.get_by_role("textbox", name="请输入密码").fill("")
page.get_by_role("button", name="登录").click()
```
#### (3).参数exact：控制 name 是否完全匹配

    | 值 | 描述                           |
    | --- | ------------------------------- |
    |True | 要求元素名称与name完全一致          |
    |False| 不要求完全一致，元素名称包含name即可  |

则之前的表达式可做如下修改：

```python
page.get_by_role("textbox", name="邮箱/手机号/账号", exact=False).fill("")
page.get_by_role("textbox", name="密码", exact=False).fill("")
page.get_by_role("button", name="登录").click()
```

#### (4).其他参数
| 参数       | 类型          | 作用               |
| -------- | ----------- | ---------------- |
| checked  | bool        | checkbox/radio状态 |
| pressed  | bool        | 按钮是否处于 pressed 状态       |
| selected | bool        | option/tab选中     |
| expanded | bool        | 是否展开             |
| level    | int         | heading等级        |
| disabled | bool        | 是否禁用             |

### 2. page.get_by_text()通过文本内容定位。
#### (1).参数text：
&ensp;注意该函数仅匹配DOM中的“可见文本节点”，而无法匹配placeholder中的内容，因为后者是HTML属性，不是文本节点。
#### (2).参数exact：控制 text 是否完全匹配

    | 值 | 描述                           |
    | --- | ------------------------------- |
    |True | 要求元素名称与name完全一致          |
    |False| 不要求完全一致，元素名称包含name即可  |
使用该定位方式后的登录脚本则可修改为：

```python
page.get_by_role("textbox", name="邮箱/手机号/账号", exact=False).fill("")
page.get_by_role("textbox", name="密码", exact=False).fill("")
page.get_by_text("登录", exact=True).click()
```

:::info{title="相关信息"}
一个 HTML 元素通常由三部分组成：

    开始标签 + 属性 + 文本节点 + 结束标签
    例如：
    <button class="login-btn">登录</button>
| 部分                  | 类型         | 示例        |
| ------------------- | ---------- | --------- |
| `<button>`          | 标签（HTML元素） | button    |
| `class="login-btn"` | HTML属性     | class     |
| `登录`                | 文本节点       | text node |
| `</button>`         | 结束标签       | button    |

而

    <input type="text" placeholder="请输入邮箱">
属性包括：
| 属性          | 值               |
| ----------- | --------------- |
| type        | text            |
| placeholder | 请输入邮箱           |
| class       | el-input__inner |
:::

### 3. page.get_by_label()通过关联标签的文本定位表单控件。
#### (1).参数text：表示label 的文本，表单控件的文本。
#### (2).参数exact：控制 text 是否完全匹配。

    | 值 | 描述                           |
    | --- | ------------------------------- |
    |True | 要求元素名称与name完全一致          |
    |False| 不要求完全一致，元素名称包含name即可  |
&ensp;这里以登录页面的“下次自动登录”进行举例,值得注意的是，该元素可以通过该方法定位到，但定位到的元素却无法进行点击操作，对于定位到的元素能否被点击，playwright有自己的一套判断标准，在这里不进行展开：

```python
pct = page.get_by_label("下次自动登录").count()
    print("找到存在label标签的元素{}".format(pct))
>>>
1
```
### 4. page.get_by_placeholder()通过占位符定位输入框。
&ensp;使用标签中Placeholder的属性值进行定位：
#### (1).参数text：表示Placeholder的属性值。
#### (2).参数exact：控制 text 是否完全匹配。
&ensp;使用该定位方式后的登录脚本则可修改为：
```python
page.get_by_placeholder("邮箱/手机号/账号", exact=False).fill("")
page.get_by_placeholder("密码", exact=False).fill("")
page.get_by_text("登录", exact=True).click()
```

### 5. page.get_by_alt_text()通过文本替代信息定位元素（通常是图像）。。
&ensp;使用元素中的alt的属性值来进行定位(该元素通常是图像)，由于登录页无该元素，在这里引用playwright官方文档中的例子进行说明：

```html
<img alt="playwright logo" src="/img/playwright-logo.svg" width="100" />
```
```python
page.get_by_alt_text("playwright logo").click()
```
### 6. page.get_by_title()通过 title 属性定位元素。
&ensp;依旧使用playwright官方文档中的例子进行说明：
```html
<span title='Issues count'>25 issues</span>
```
```python
page.get_by_title("Issues count").click()
```

### 7. page.get_by_test_id()根据data-testid元素的属性定位元素。
&ensp;专门用于通过 开发者预先在页面上标记的属性 来快速、稳定地定位元素。该标记旨在提高跨团队协作的效率。
```html
<input data-testid="login-username" placeholder="请输入账号">
```
```python
ppage.get_by_test_id("login-username").fill("admin")
```

# 二. 其他定位方式
### 1. CSS定位
&ensp;Playwright在原生的CSS的基础上新增了一些伪类选择器，如下：

| 伪类             | 作用        | 示例                               |
| -------------- | --------- | -------------------------------- |
| `:visible`     | 匹配可见元素    | `button:visible`                 |
| `:has-text()`  | 匹配包含指定文本  | `button:has-text("Login")`       |
| `:has()`       | 匹配包含指定子元素 | `div:has(button)`                |
| `nth=`        | 第N个元素     |  |
| `:nth-match()` | 第 N 个匹配元素 | `:nth-match(button,3)`           |

&ensp;结合上述定位方式后的登录脚本则可修改为：
```python
    page.locator("input").locator("nth=0").fill("")
    page.locator("input").locator("nth=1").fill("")
    page.locator("button:has-text('登录')").click()
```

:::info{title="相关信息"}
伪类：一种用于描述元素特定状态或特征的CSS选择器，语法特点是以“：”开头，作用是满足某种条件是匹配元素，关于常见的CSS伪类请移步[CSS 伪类](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Selectors/Pseudo-classes)
:::

### 2. Xpath表达式定位
&ensp;常见的Xpath表达式：
| 语法           | 含义     | 示例                                |
| ------------ | ------ | --------------------------------- |
| `//`         | 任意层级查找 | `//div`                           |
| `/`          | 直接子节点  | `/html/body/div`                  |
| `@`          | 属性     | `//input[@id='username']`         |
| `text()`     | 文本     | `//button[text()='Login']`        |
| `contains()` | 包含     | `//div[contains(@class,'login')]` |
| `｜` | 管道运算符（Union）合并多个 XPath 查询结果| //button \| //a(匹配 button 或 a)|

&ensp;结合上述定位方式后的登录脚本则可修改为：
```python
    page.locator('//input[@placeholder="请输入邮箱/手机号/账号"]').fill("")
    page.locator('//input[@placeholder="请输入密码"]').fill("")
    page.locator('//button[./span="登录"]').click()
```

# 3. 定位方式推荐顺序
&ensp;Playwright的官方文档强调优先使用**内置定位**，原因是内置定位方式更接近用户行为，定位方便，稳定性高，维护成本低，综合衡量我推荐的元素定位顺序如下：
1. **get_by_role(**):基本可定位大部分元素，可选参数众多。
2. **get_by_label()/get_by_placeholder()/get_by_text()/get_by_test_id()/get_by_title()/get_by_alt_text()**:比较挑元素的特有属性，有针对性的定位。
3. **CSS定位**：定位速度快，但定位语义较复杂，且依赖DOM结构，稳定性较内置定位较差。
4. **Xpath定位**：定位速度较慢，不稳定。


# 4. 真伪控件的判断
&ensp;在元素定位的过程中，我们经常会遇到这种情况：元素可以定位的到，但是无法对其进行点击、输入等操作，然后我们就会往外层找一点/往里层找一点，直到能进行操作为止，较为耗时间，有没有什么方法能够大致的判断出该节点是否可交互，我的经验是尽量定位**真控件**而不是**伪控件**。

### 1. 常见的真控件特点

| 控件类型 | HTML标签                  |
| ---- | ----------------------- |
| 输入框  | `input`                 |
| 按钮   | `button`                |
| 下拉框  | `select`                |
| 复选框  | `input type="checkbox"` |
| 单选框  | `input type="radio"`    |


### 2. 常见UI组件伪控件的特点

| class特征 | 组件          |
| ------- | ----------- |
| el-     | ElementUI   |
| ant-    | Ant Design  |
| mui-    | Material UI |
| v-      | Vue组件       |

playwright:元素定位

# 前言
&ensp;现在越来越多的文章都在说playwright在自动化方面比selenium更加的具有优势，而且我看现在大多数公司的招聘也要求掌握playwright，所以有必要对该工具的使用进行掌握，并作一些详细的记录。在这里我并不会对两个工具进行比较，我始终相信，工具本身并无强弱之分，只在使用场景的是否合适。



# 环境搭建
&ensp;本次虚拟环境使用uv来进行解释器的管理与环境的管理。

## 1. 选择合适的解释器版本创建项目

```bash
uv python list  # 查看解释器列表
>>>
cpython-3.14.0rc3-macos-x86_64-none                 <download available>
cpython-3.14.0rc3+freethreaded-macos-x86_64-none    <download available>
cpython-3.13.7-macos-x86_64-none                    <download available>
cpython-3.13.7+freethreaded-macos-x86_64-none       <download available>
cpython-3.13.4-macos-x86_64-none                    /Users/jingwei/.pyenv/shims/python3.13
cpython-3.13.4-macos-x86_64-none                    /Users/jingwei/.pyenv/shims/python3
cpython-3.13.4-macos-x86_64-none                    /Users/jingwei/.pyenv/shims/python

uv init KTP --python 3.13  # 选择解释器初始化项目
>>>
Initialized project `ktp` at `/Library/PyLearning/KTP`
```

## 2. 在项目目录中创建虚拟环境


```bash
% cd KTP
% uv venv --python 3.13 # 创建虚拟环境
% source .venv/bin/activate  # 激活虚拟环境
% tree -a -L 2  # 查看目录结构
.
├── .idea
│   ├── .gitignore
│   ├── inspectionProfiles
│   ├── KTP.iml
│   ├── misc.xml
│   ├── modules.xml
│   ├── vcs.xml
│   └── workspace.xml
├── .python-version
├── .venv
│   ├── .gitignore
│   ├── .lock
│   ├── bin
│   ├── CACHEDIR.TAG
│   ├── include
│   ├── lib
│   └── pyvenv.cfg
├── main.py
├── pyproject.toml
├── README.md
```

## 3. pycharm编译器解释器的配置

打开pycharm >> 设置... >> Python >> 解释器

![image.png](/static/img/6e17f17c6a7d7dea0b3f43c41a0c8c7b.image.webp)


# playwright的安装与demo编写

## 1. playwright 与 Chromium安装
&ensp;playwright需要下载单独的浏览器，以确保自动化运行的可靠性、一致性和可维护性。

```bash
uv add playwright  # 安装 playwright
uv pip show playwright  # 查看playwright的安装的详情
>>>
Name: playwright
Version: 1.58.0
Location: /Library/PyLearning/KTP/.venv/lib/python3.13/site-packages
Requires: greenlet, pyee
Required-by:

uv run playwright install chromium  # 安装浏览器，安装的位置在全局的缓存目录中，来实现多项目的共享。
ls /Users/jingwei/Library/Caches/ms-playwright/  # 查看安装的看浏览器
```

:::note{title="注"}
国内使用`uv run playwright install chromium`下载浏览器时大概率会发生超时下载失败的情况：

查看本地vpn代理的端口：


![image.png](/static/img/dd2ae770a6c31485717fe8cb6aed4af1.image.webp)

走代理端口下载：

`export HTTPS_PROXY=http://127.0.0.1:7890`（mac）

`set HTTPS_PROXY=http://127.0.0.1:7890`（win）

`uv run playwright install chromium `
:::

## 2. demo编写


```python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://www.google.com")
    print("the page title is {}".format(page.title()))
    browser.close()
```