UiPath Level 1-Lesson 4. Recording

本文详细介绍如何使用UiPath的记录器功能进行自动化项目开发,包括基本录制、桌面录制、Web录制等技巧,以及如何自定义录制流程,适用于不同类型的自动化任务。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学习大纲

  • 如何使用记录器 (recorders)添加用户界面活动
  • 如何自定义

 

1. 录制(Recording)功能

录制功能可以在自动化项目的最初创建一个Workflow的框架。

四种类型:

  • Basic:桌面应用程序,如记事本(Notepad)。
  • Desktop:桌面应用程序,如记事本(Notepad)。
  • Web:浏览器和网页app。
  • Citrix:虚拟机,远程桌面和Citrix环境。

基本操作:

  • 点击录制按钮,弹出上述四个选项,选择任一选项会弹出录制控制器,此处以Basic为例进行录制。
  • 点击Automatic Recorder开始录制。
  • 录制开始后,蓝色的矩形表示UiPath识别出的元素,单击这些元素可与之互动。
  • 以记事本为例,单击可编辑区域会弹出一个对话框,允许用户写入字符,选择特殊键值等。
    • Type Password:隐藏输入的内容。
    • Empty Field:输入前清空当前编辑区域的内容。
  • 按下Esc键可以使控制器弹出,单击Save & Exit或再按一次Esc键结束录制。
  • 录制完成,生成一个Recording Sequence。可以在属性面板中修改录制的活动。
    • 录制产生的图片不会影响程序运行,仅为了方便阅读。可以在下拉菜单中更改或删除这些图片。
    • 截图自动保存为.png文件并存放在项目文件夹下的“.screenshot”文件夹中。

可录制和不可录制的信息:

  • 可录制信息
    • 鼠标左键单击按钮、复选框、下拉菜单等可点击的元素。
    • 在可编辑区域输入文字。
  • 不可录制信息
    • 键盘快捷键
    • 辅助按键,如Ctrl键。
    • 鼠标右击
    • 鼠标悬停
    • ……

注意:更改了显示设置而没有重新启动计算机的情况下,UiPath无法正确识别元素。


 

2. Desktop录制

Basic和Desktop都可以录制用户对桌面应用程序的操作。为了体现二者的区别,可以分别使用Basic和Desktop录制下面的操作:

  • 单击已经打开的记事本的可编辑区域,输入"Hello World!"。
  • 单击格式(Format)弹出下拉菜单,选择字体(Font)。
  • 在字体对话框中选择18号字体。

录制完成后观察两个Sequence的不同:

  • Desktop将所有的操作放入了三个Attach Window活动中,三个窗口分别是记事本窗口,格式(Format)下拉菜单,和字体对话框。
  • Basic只是记录了操作流程,并没有添加Attach Window活动。

总结 - Basic和Desktop的区别:

Basic 

  • 活动独立存在于简单的Workflow里。
  • 可能受到干扰。

Desktop

  • 活动嵌套在Attach Window活动的内部;
  • 不会出现干扰的问题;
  • 更复杂的Workflow。

* Uipath通过应用程序的名称、窗口的标题、当前打开的文件等信息识别出正确的窗口,但有时会出现这些信息完全一样的情况,比如打开两个未保存过的记事本程序。如果使用Basic录制,程序会在顶层的记事本上运行,而且可能产生错误。如果使用Desktop录制,就可以避免这些干扰,找到录制时使用的那个记事本。


 

3. 录制技巧

  • 输入的内容"Hello World!"可以改为变量。
  • 在下拉菜单中选择Indicate on Screen可以选择其他的元素,比如把更改字体改为更改字号。
  • 按下F2可以暂停录制3秒钟,桌面右下角会出现倒计时,倒计时结束则恢复录制。F2在录制自动隐藏的菜单中的元素时非常实用。比如把打开字体对话框改为选择自动换行,为了不把点击格式(Format)下拉菜单这一步录制进去,可以先使用F2暂停录制。
  • 手动录制 (Manual Recording):在录制过程中按Esc键打开控制器,选择手工录制的功能;手工录制结束后,控制器会再次弹出,按Automatic Recorder键继续刚才的录制。
  • 手工录制可以实现下列操作下列操作:
    • 快捷键
    • 特殊键
    • 右击鼠标
    • 鼠标悬停
    • ……
    • 从应用程序中获取文本信息 (Text → Copy Text)
    • 查找元素和图片
    • 与剪贴板互动
  • Selector:每一个录制下来的行动都会有一个selector,在属性面板Target组下面可以找到它。Selector帮助UiPath找到正确的元素或屏幕。因此,运行录好的程序时,如果UiPath无法找到元素或出现类似的问题,可以检查Selector属性。
    • Edit Selector文本框里的是实际的Selector;Edit Attributes文本框里是相关的属性。
    • Attach to Live Element:如果某个元素的值是变化的,比如图中的$377就表示一个会发生变动的总金额,UiPath在元素改变后可能无法再找到它。此时单击Attach to Live Element,然后再次点击出现问题的元素,UiPath就会尝试去修复Selector。

 

4. Web录制

Web录制和Desktop比较相似:Desktop把所有录制的活动嵌套在几个Attach Window里,而Web把录制的活动嵌套在几个Attach Browser里,以避免其他浏览器页面的干扰。

实例:在Google Finance上查找一支股票在最近两个开盘日的点数,显示一条消息告诉用户是上涨了还是下跌了。

* 股票代码:TSLA,MSFT

添加UiPath谷歌扩展功能

可能出现的问题:

  • 如何让UiPath自动打开浏览器:添加一个Open Browser活动,把它内部的Do删掉,把录制好的Attach Browser活动中的Do拖进来。
  • 录制“后退”的时候会把当前网页的标题录进去。如果标题中包含特定的股票名称如TSLA,则查找另一支股票时会出现问题。解决方法是检查“后退”所在的Attach WIndow的Selector属性,取消勾选包含TSLA的Edit Attributes。
  • Get Text活动从网页上抓取的文本会保存在Generic Value型变量中(Td1, Td2),但UiPath无法直接运算Td1-Td2。比较快捷的方式是在公式Td1-Td2的前面加上0+,即0+Td1-Td2。公式以数字开头,Uipath会默认后面的Generic Value型变量也是数字;以文本开头则默认后面的Generic Value型变量也是文本。
  • Close Application活动放到Attach Window里,就可以关闭这个Attach Window所在的程序。
  • 修改Recording Sequence时,如果怕把它弄乱了,可以先复制一份出来。

 

5. 练习:

  1) 要求用户输入一段文本并询问保存文件使用的标题,在记事本中输入文本,设置字体样式为粗体16号字,另存为该文件为指定标题。

  *很简单的练习,在此不描述过程了。

  2) 要求用户输入一个城市名,打开浏览器,在Google.com搜索“weather in <city> ”并抓取温度数据显示在message box里。

  思路:

  • 添加一个Input Dialog活动,用来输出变量city。
  • 打开浏览器(推荐使用IE浏览器),导航到谷歌主页。
  • 使用录制工具的Web录制,在Controller中选择Open Browser,点击打开的IE浏览器页面。
    • 注意不要点击到浏览器的窗口栏。
    • 录制工具会弹出提示让你确认URL。
  • 在Controller中选择Type菜单中的Type,输入“weather in new york”。
  • 选择Type菜单中的Send Hotkey。点击浏览器页面,在下拉菜单中选择Enter键。
  • 选择Text菜单中Scrape→Screen Scraping,点击网页上的温度数值(生成Get Full Text活动)。
  • 在Open Browser菜单中选择Close Browser。
  • 单击Save & Exit退出录制。
  • 把录制得到的所有活动都放到Open Broswer活动的Do里。
  • 把刚才输入的new york修改为变量名city。
  • 用Message Box活动显示Get Full Text活动输出的变量,即抓取的温度数据。

 

*本课使用过的新活动、方法、函数等:

  • Open Browser
  • Attach Browser
  • Close Application
  • Close Tab
  • Get Full Text
  • Send HotKey

 

转载于:https://www.cnblogs.com/TeresaMu/p/9811145.html

<think>我们正在解决一个Vue应用中的问题:调用`getUserMedia`时出现`Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')`错误。 根据引用[1][2][3],这个错误通常是因为在非安全上下文中(非HTTPS或非localhost)尝试使用`navigator.mediaDevices.getUserMedia`导致的。 引用[3]特别指出: - `getUserMedia` API仅在安全的上下文中工作(HTTPS或localhost)。 - 在非安全的HTTP上下文中,`navigator.mediaDevices`可能是`undefined`,因此调用`getUserMedia`就会出错。 解决方案: 1. 确保在安全的上下文中运行(HTTPS或localhost)。 2. 如果暂时无法使用HTTPS,可以在Chrome中临时启用一个标志,将不安全的来源视为安全(仅用于开发和测试)。 具体步骤: 方案一(推荐):使用HTTPS或localhost - 在本地开发时,使用`localhost`访问应用(不会触发安全限制)。 - 部署时使用HTTPS。 方案二(临时解决开发环境问题): - 在Chrome浏览器中访问:`chrome://flags/#unsafely-treat-insecure-origin-as-secure` - 将该标志设置为`Enabled`,并在下面的输入框中填入你的HTTP地址(例如`http://your-ip:port`)。 - 重启浏览器。 注意:方案二仅适用于开发和测试,生产环境必须使用HTTPS。 在Vue应用中的代码检查: - 确保在调用`navigator.mediaDevices.getUserMedia`之前,先检查`navigator.mediaDevices`是否存在。 - 可以添加如下代码进行兼容性处理: 例如: ```javascript if (!navigator.mediaDevices) { console.error('navigator.mediaDevices is not available'); // 可能需要处理兼容性问题或提示用户使用安全上下文 } else { navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(stream => { // 处理媒体流 }) .catch(error => { console.error('getUserMedia error:', error); }); } ``` 另外,根据引用[2],还有可能是浏览器兼容性问题。确保你使用的浏览器支持`getUserMedia`(现代浏览器基本都支持,但注意一些旧版本或移动端浏览器可能支持程度不同)。 总结步骤: 1. 检查运行环境:确保是localhost或HTTPS。 2. 如果非安全环境,考虑升级到HTTPS或使用localhost。 3. 临时解决方案:启用Chrome标志(仅开发测试)。 4. 代码中添加兼容性检查。 如果问题仍然存在,请提供更多信息(如运行环境、浏览器版本等)。</think>### 解决 Vue 应用中 `getUserMedia` 的 TypeError 异常 在 Vue 应用中遇到 `Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')` 错误,通常是由以下原因导致的: #### 🔍 核心原因分析 1. **安全上下文限制** `navigator.mediaDevices.getUserMedia()` 仅在安全上下文中可用: - ✅ `https://` 协议 ✅ `localhost` 或 `127.0.0.1` ❌ 非本地环境的 `http://` 协议(会返回 `undefined`)[^1][^2][^3] 2. **浏览器兼容性问题** 旧版浏览器(如 IE)或隐私模式下可能不支持该 API。 3. **Vue 生命周期时机错误** 在组件挂载前(`created` 钩子)调用 API,此时浏览器环境可能未完全初始化。 #### 🛠️ 解决方案 ##### 1. 强制使用安全环境(推荐) ```javascript // 在调用前检查环境 if (location.protocol !== 'https:' && !location.hostname.match(/localhost|127\.0\.0\.1/)) { location.replace(`https://${location.host}${location.pathname}`); // 重定向到 HTTPS } ``` ##### 2. 开发环境临时解决方案 1. 在 Chrome 地址栏输入:`chrome://flags/#unsafely-treat-insecure-origin-as-secure` 2. 启用该标志 3. 在输入框中添加你的 HTTP 地址(如 `http://localhost:8080`) 4. 重启浏览器[^3] ##### 3. 添加兼容性检查代码 ```javascript export default { mounted() { this.initCamera(); }, methods: { async initCamera() { // 1. 检查 API 可用性 if (!navigator.mediaDevices?.getUserMedia) { alert("您的浏览器不支持摄像头访问"); return; } // 2. 安全环境验证 const isSecure = window.isSecureContext; // 或手动检查协议 try { const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); // 使用 stream 处理视频流... } catch (error) { console.error("摄像头访问失败:", error); } } } } ``` ##### 4. 生产环境必须配置 HTTPS - 使用 Let's Encrypt 等免费 SSL 证书 - 云服务商(AWS/Azure)提供托管证书 - Nginx 配置示例: ```nginx server { listen 443 ssl; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/privkey.pem; # ...其他配置 } ``` #### ⚠️ 注意事项 1. **iOS 特殊限制**:Safari 要求用户主动交互(如按钮点击)后才能调用 `getUserMedia()` 2. **权限处理**:首次使用需浏览器权限弹窗确认 3. **Vue 生命周期**:确保在 `mounted()` 后调用 API --- ### 📚 相关问题 1. **如何在 Vue 中实现摄像头权限被拒绝后的友好提示?** 2. **使用 WebRTC 时如何处理不同浏览器的媒体兼容性问题?** 3. **Vue 应用部署 HTTPS 的最佳实践有哪些?** 4. **如何通过 Vuex 管理全局媒体流状态?** [^1]: 部署 JS 项目时出现 `navigator.mediaDevices` undefined 的典型错误 [^2]: Chrome 浏览器在 HTTP 协议下调用摄像头会触发此安全限制 [^3]: 通过浏览器标志临时允许 HTTP 访问媒体设备,但仅限开发环境使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值