Dayzbe

https://www.yuque.com/artist/uirecorder/
Admin
This project contains documentation and content for Dayzbe, providing information in multiple...
Tokens:7,756
Snippets:134
Trust Score:9.1
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install UIRecorder with Sudo

Source: https://www.yuque.com/artist/uirecorder/zslbnp

If encountering permission errors during installation, try using 'sudo' with the npm install command to grant necessary administrative privileges.

```bash
sudo npm install uirecorder mocha macaca-reporter -g
```

--------------------------------

### Start UIRecorder Server

Source: https://www.yuque.com/artist/uirecorder/qghot5

Open a new terminal window and run this command in your project directory to start the UIRecorder server.

```bash
npm run server
```

--------------------------------

### Install Selenium Standalone

Source: https://www.yuque.com/artist/uirecorder/qghot5

Run this command to install Selenium Standalone if it's not successfully integrated into your UIRecorder project.

```bash
npm install selenium-standalone
./node_modules/.bin/selenium-standalone install
```

--------------------------------

### Check UIRecorder Installation

Source: https://www.yuque.com/artist/uirecorder/zslbnp

Verify the global installation of UIRecorder, Mocha, and Macaca Reporter using CNPM list commands. This helps confirm that the packages have been installed correctly.

```bash
cnpm list uirecorder -g
cnpm list mocha -g
cnpm list macaca-reporter -g
```

--------------------------------

### Install UIRecorder and Dependencies

Source: https://www.yuque.com/artist/uirecorder/zslbnp

Install UIRecorder, Mocha, and Macaca Reporter globally using CNPM. These are essential packages for the UIRecorder functionality.

```bash
cnpm install uirecorder mocha macaca-reporter -g
```

--------------------------------

### Install Dependencies for Existing Project

Source: https://www.yuque.com/artist/uirecorder/yd7ztf

Use this command to install project dependencies, typically when cloning an existing project from a Git repository.

```bash
npm install
```

--------------------------------

### Install UIRecorder with Unsafe Permissions

Source: https://www.yuque.com/artist/uirecorder/zslbnp

Use this command to install UIRecorder globally with unsafe permissions, which can resolve permission-related issues, especially when running as a root user on Linux.

```bash
npm i --unsafe-perm uirecorder -g
```

--------------------------------

### Start New Test Case Recording

Source: https://www.yuque.com/artist/uirecorder/yd7ztf

Execute this command to begin recording a new test case. Ensure the script filename does not conflict with existing ones.

```bash
npx @ui_recorder/cli record new_test_case
```

--------------------------------

### Install CNPM Package Manager

Source: https://www.yuque.com/artist/uirecorder/zslbnp

Install the CNPM package manager globally using npm. This is recommended for faster package downloads due to potential network issues with the default npm registry.

```bash
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

--------------------------------

### Troubleshooting: Loading Chrome Configuration

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

To load custom Chrome configurations, you might need to specify them during the setup or initialization process.

```text
怎么加载chrome的配置
```

--------------------------------

### Troubleshooting: Initialize UIRecorder Fails on Windows 7

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

If `uirecorder init` fails on Windows 7, try uninstalling Node.js v10.x and installing v8.16. Ensure you have followed the FAQ for Node.js version compatibility.

```bash
卸载node10安装8.15
```

--------------------------------

### Troubleshooting: Recording Toolbar Not Appearing

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

If the recording toolbar is not visible and the regression testing browser is blank, check for system-level device connection issues and ensure the `cnpm install` command completed without critical warnings.

```text
我打开录制页面后，没看到对应的工具栏，回归校验浏览器的窗口也是空白的，控制台报链到系统上的设备没发挥作用
在安装cnpm install uirecorder mocha macaca-reporter -g的时候看有如下的warn
```

--------------------------------

### Troubleshooting: Mobile Recording Issues

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

If the browser does not load or shows a loading spinner during mobile recording after entering the app path, ensure packages are installed on the device and try refreshing the browser.

```text
移动端，输入app路径回车后，启动浏览器一直这样，包也没有装到手机上，有人知道怎么回事么
```

--------------------------------

### Update package.json for UIRecorder Upgrade

Source: https://www.yuque.com/artist/uirecorder/uqgnhu

Modify your package.json to reflect the UIRecorder upgrade. After changes, run npm install to update dependencies.

```json
{
  "devDependencies": {
    "uirecorder": "^3.0.0"
  }
}
```

--------------------------------

### Initialize UIRecorder Project

Source: https://www.yuque.com/artist/uirecorder/yd7ztf

Use this command to create a new UIRecorder project directory and initialize it.

```bash
mkdir ui_recorder_project
cd ui_recorder_project
npx @ui_recorder/cli init
```

--------------------------------

### Upgrade UIRecorder for New Projects

Source: https://www.yuque.com/artist/uirecorder/uqgnhu

To set up a new project with the latest UIRecorder, run this global upgrade command.

```bash
npm install -g uirecorder
```

--------------------------------

### Troubleshooting: UIRecorder Initialization Error

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

If initialization fails after removing files and reinstalling, or after changing Node.js versions, consider reinstalling UIRecorder.

```bash
重新安装 uirecorder 试试
```

--------------------------------

### Continue Recording Existing Test Case

Source: https://www.yuque.com/artist/uirecorder/yd7ztf

Run this command to resume recording for an existing test case. The browser will open after the page has finished loading.

```bash
npx @ui_recorder/cli record existing_test_case
```

--------------------------------

### Troubleshooting: Certificate Issues

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

If you encounter certificate errors during recording, ensure that SSL strict mode is properly handled. Standard solutions like setting `strict-ssl false` might not always resolve the issue.

```text
请问这种证书问题怎么解决呢 按照网上说的设置源 ，set strict-ssl false都试过 不行啊
```

--------------------------------

### Iterating Through Pages with Dynamic URLs

Source: https://www.yuque.com/artist/uirecorder/snrc3g?language=en-us

This code snippet shows how to handle multiple test scenarios by parameterizing the URL. It defines an array of page numbers and then maps over this array to create individual test cases for each page, allowing for dynamic URL generation with different `currentPage` parameters.

```javascript
const pages = [1, 2, 3];

pages.map( currentPage => {
it('查询指定列表页', async function(){
await driver.url(_(`http://test.com/list.html?currentPage=${currentPage}`));
});
})
  
```

--------------------------------

### Execute Specific Test Scripts with Regex

Source: https://www.yuque.com/artist/uirecorder/qghot5

Use regular expressions with the 'source run.sh' command to execute only the test cases within a specific folder, like 'sample/*'.

```bash
source run.sh 'sample/*'
```

--------------------------------

### Chrome Extension ID in start.js (Version 3.5.1)

Source: https://www.yuque.com/artist/uirecorder/zy1wum?language=en-us

This code snippet shows the `start.js` configuration for version 3.5.1 of the UIRecorder, where the extension ID 'njkfhfdkecbpjlnfmminhmdcakopmcnc' was used and still resulted in blocking errors. This was later resolved in version 3.5.2.

```javascript
yield browser.url('chrome-extension://' + (debug ? 'njkfhfdkecbpjlnfmminhmdcakopmcnc' : 'njkfhfdkecbpjlnfmminhmdcakopmcnc')+'/'+(mobile?'mobile':'start')+'.html?port='+serverPort);
```

--------------------------------

### Troubleshooting: Browser Blocked by Chrome Version

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

If the browser is blocked upon startup, verify that your Chrome version (e.g., v148) is compatible with your UIRecorder version (e.g., v3.5.3). An incompatible version can prevent recording.

```text
启动的浏览器被屏蔽了，chrome版本号是148，uirecorder版本是3.5.3
```

--------------------------------

### Configure Chrome Extension URL in start.js

Source: https://www.yuque.com/artist/uirecorder/zy1wum

Modify this line in `lib/start.js` to use the correct Chrome extension ID. The ID changes with each repackaging of the extension. Ensure the `debug` and `mobile` flags are set appropriately for your environment.

```javascript
yield browser.url('chrome-extension://' + (debug ? 'dloihppejiolohmfmhdceaikmmfmmemf' : 'ialohcaclaemfigcdkmagfiiiikebaak') + '/' + (mobile ? 'mobile' : 'start') + '.html?port=' + serverPort);
```

```javascript
yield browser.url('chrome-extension://' + (debug ? 'njkfhfdkecbpjlnfmminhmdcakopmcnc' : 'njkfhfdkecbpjlnfmminhmdcakopmcnc')+'/'+(mobile?'mobile':'start')+'.html?port='+serverPort);
```

--------------------------------

### Troubleshooting: Setting Default Browser to Firefox

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

UIRecorder is based on a Chrome extension and currently only supports recording with Chrome browsers.

```text
怎么设置默认使用Firefox浏览器进行录制呢
基于 chrome extension，录制仅支持 chrome
```

--------------------------------

### UIRecorder Custom Report Configuration

Source: https://www.yuque.com/artist/uirecorder/qghot5

Versions of uirecorder@3.2.0 and later support custom report generation directories. Configure the relevant settings as shown.

```json
{
  "custom_report_dir": "path/to/your/reports"
}
```

--------------------------------

### Troubleshooting: Browser Resolution

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

You can choose different resolutions for the browser window during recording. The format is typically width x height, e.g., 1024x768.

```text
开始录制的时候 浏览器大小 (格式：1024 x 768): (1024x768) 可以选择其他分辨率么
```

--------------------------------

### Troubleshooting: Timeout During Recording

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

If you encounter timeouts during recording, you may need to increase the delay time. If the delay is significant, investigate potential performance issues.

```text
录制时显示timeout，怎么增加延迟时间
录制时延迟很大怎么办
```

--------------------------------

### Troubleshooting: Android App Recording Browser Load Failure

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

When recording Android apps, if the browser fails to load after clicking on the app path, but the app has loaded on the emulator, try refreshing the browser.

```text
录制Android APP时，浏览器的上点击后加载不出来，但模拟器（手机）端已经加载完成了。尝试刷新浏览器一致转圈。
```

--------------------------------

### Modify Script for Different Test Scenarios

Source: https://www.yuque.com/artist/uirecorder/snrc3g

Adapt recorded scripts to handle variations in test scenarios, such as differing parameters in list page queries, by manually editing the script code. This reduces the need for multiple recordings.

```javascript
var page = 1;
var size = 10;
var totalPage = 3;
for (var i = 0; i < totalPage; i++) {
  var url = "/api/list?page="+page+"&size="+size;
  // ... other operations
  page++;
}
```

--------------------------------

### Clicking a 'Skip' Button with DOM Path and Mouse Movement

Source: https://www.yuque.com/artist/uirecorder/snrc3g?language=en-us

This snippet demonstrates how to record a click action on a 'skip' button, including its DOM path and relative mouse movement. It uses `driver.sleep` and `wait` for element display, followed by mouse movement and click operations. The `catchError` function is used to handle potential errors.

```javascript
it('click: 跳过 ( //a[text()="跳过"], 38, 15, 0 )', async function(){
await driver.sleep(300).wait('//a[text()="跳转"]', 1000)
.sleep(300).mouseMove(38, 15).click(0).catch(catchError);
});
```

--------------------------------

### Configure Chrome Mobile Emulator

Source: https://www.yuque.com/artist/uirecorder/yd7ztf

Modify the config.json file to enable Chrome's mobile emulator mode for recording and regression testing. This feature requires UIRecorder version 3.3.0 or higher.

```json
{
  "mobileEmulation": {
    "deviceName": "Pixel 5"
  }
}
```

--------------------------------

### Troubleshooting: Browser Blocked by Extension

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

If the browser is blocked by an extension during recording, ensure your Chrome browser version is compatible with your UIRecorder version. An outdated Chrome version may cause this issue.

```text
uirecorder 版本、chrome 浏览器版本？
chrome 版本过低，不匹配导致
```

--------------------------------

### Configure Chrome Mobile Emulator

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

Modify the config.json file to enable Chrome mobile emulator mode for recording and regression testing. The `mobileEmulation` field specifies the device model.

```json
{
  "host": "127.0.0.1",
  "port": 8888,
  "log": "./log",
  "chrome": {
    "executable": "",
    "args": [
      "--ignore-certificate-errors",
      "--no-sandbox",
      "--lang=en",
      "--custom-chrome-args"
    ],
    "mobileEmulation": {
      "deviceMetrics": {
        "width": 360,
        "height": 640,
        "pixelRatio": 3
      },
      "userAgent": "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/19.0.1041.138 Mobile Safari/535.19"
    }
  }
}
```

--------------------------------

### Troubleshooting: Chrome Version Compatibility

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

Ensure your Chrome browser version is compatible with the UIRecorder version. Some versions may require specific Chrome browser versions (e.g., v86 or v87) to function correctly.

```text
求助这个是什么问题导致的，怎么解决
是不是只能升级到86版本呀
我今天安装的，浏览器版本必须升到86才行。不知道配置能不能自己调整
```

--------------------------------

### Add Screenshot to Context in Test Cases

Source: https://www.yuque.com/artist/uirecorder/uqgnhu

Modify test case files (*.spec.js) to capture a screenshot at the end of each execution step and add it to the context (ctx). This is done within the afterEach hook.

```javascript
afterEach(function () {
  if (this.ctx &amp;&amp; this.ctx.driver) {
    return this.ctx.driver.saveScreenshot(path.join(process.cwd(), 'screenshots'), Date.now() + '.png');
  }
});
```

--------------------------------

### Update Chrome Extension ID in start.js

Source: https://www.yuque.com/artist/uirecorder/zy1wum?language=en-us

Modify the `lib/start.js` file to update the Chrome extension ID. This is necessary after each repackaging of the extension to resolve server request blocking issues. Ensure the correct ID is used based on whether debugging or mobile mode is enabled.

```javascript
yield browser.url('chrome-extension://' + (debug ? 'dloihppejiolohmfmhdceaikmmfmmemf' : 'ialohcaclaemfigcdkmagfiiiikebaak') + '/' + (mobile ? 'mobile' : 'start') + '.html?port=' + serverPort);
```

--------------------------------

### Update CNPM Registry

Source: https://www.yuque.com/artist/uirecorder/zslbnp

Update the CNPM registry to a new mirror. This command uses the npm mirror provided by Taobao, which can be useful if the default registry has issues.

```bash
npm install -g cnpm --registry=https://registry.npmmirror.com
```

--------------------------------

### Configure Chrome to Ignore Certificate Errors

Source: https://www.yuque.com/artist/uirecorder/snrc3g

When encountering HTTPS certificate errors during recording, configure the WebDriver session to ignore these errors. This is done by adding the '--ignore-certificate-errors' argument to the Chrome options in the session initialization.

```javascript
driver.session({
  'browserName': 'chrome',
  'chromeOptions': {
    'args': ['--enable-automation', '--ignore-certificate-errors']
  },
})
```

--------------------------------

### Troubleshooting: Default File Name Modification

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

To modify the default filename for new recordings, you may need to alter the UIRecorder source code, specifically in the `start.js` file around line 161.

```javascript
https://github.com/alibaba/uirecorder/blob/master/lib/start.js#L161
```

--------------------------------

### Troubleshooting: Chrome Driver Version Mismatch

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

If the ChromeDriver version (e.g., 96) used by UIRecorder differs from the auto-updated Chrome browser version (e.g., 94), you may need to manually align them or update UIRecorder.

```text
uirecorder init下载的chromedriver(96)和实际uirecorder start用的chromedriver版本不一致，一个是chrome自动升级的新版本（96），uirecorder start用的还是老的版本（94）,求问这个怎么办？
```

--------------------------------

### Troubleshooting: Recording on DingTalk

Source: https://www.yuque.com/artist/uirecorder/yd7ztf?language=en-us

Currently, UIRecorder does not directly support recording within applications like DingTalk. Its functionality is primarily for web browser interactions.

```text
可以直接在钉钉上录制吗
```

--------------------------------

### Open Chrome in Incognito Mode

Source: https://www.yuque.com/artist/uirecorder/qghot5

Configure Chrome options to use incognito mode for regression testing, which helps in clearing cookies and local storage.

```javascript
chromeOptions.addArguments('--incognito');
```
Tokens:
Raw