E2E测试相关

测试相关配置

• protractor.conf.js配置文件的配置

  const { SpecReporter } = require('jasmine-spec-reporter');
  /**
   * @type { import("protractor").Config }
   */
  exports.config = {
    allScriptsTimeout: 11000,
    specs: [
      './src/**/*.e2e-spec.ts'
    ],
    capabilities: {
      'browserName': 'chrome',
      'chromeOptions':  {
        'args': ['--disable-web-security', '--user-data-dir=C:/Data', '--window-size=1920,1080' ]
      }
    },
    directConnect: true,
    rootElement: 'body',
    baseUrl: 'http://localhost:4200/',
    framework: 'jasmine',
    jasmineNodeOpts: {
      showColors: true,
      defaultTimeoutInterval: 30000,
      print: function() {}
    },
    onPrepare() {
      require('ts-node').register({
        project: require('path').join(__dirname, './tsconfig.json')
      });
      jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    }
  };
  

  • 建议在配置中添加rootElement: 'body'选项，这个选项是为了让测试框架找到angular程序的宿主。
  • 配置chromeOptions选项，测试中可以禁用谷歌同源策略来避免跨域问题。

其余配置项均为默认，具体语法以及相关注意参照官网 http://www.protractortest.org/

• 测试input事件的注意项目

  it('パスワードを入力する', () => {
        const input = element(by.css('#password-input'));
        input.sendKeys('9990102').then(() => {
          input.getAttribute('value').then(val => {
            expect(val).toEqual('9990102');
          });
        });
      });
  

  测试代码最好使用promise的then方法进行，避免不必要的异步问题，输入框的值应该使用getAttribute('value')的方式获取，直接使用getText()是无法第一时间获取到的。

• e2e测试中不推荐使用流程控制语句

  测试中的case应该上下关联，作为流式处理，避免使用if else，否则else分支中的except将不会被执行，同时可能会扰乱case执行顺序。

  具体说明参照官网解释： https://www.protractortest.org/#/style-guide

---

在IE中运行E2E的注意事项

• 新建protractor-ie.conf.js配置文件，内容与谷歌浏览器配置文件相同

  修改部分：

  capabilities: {
      browserName: 'internet explorer'
   },
  directConnect: false,  // ie需要配置成false,
  seleniumAddress: 'http://localhost:4444/wd/hub/',  // ie的服务器配置 必须项目
  

• 测试代码书写注意事项：

  browser.waitForAngularEnabled(false);
  

  上述代码目的是为了等待Angular App的加载，默认是false,但是在IE中,仍需要显示声明。

  在第一个测试项导航到页面时需要设置browser.waitForAngularEnabled(false);

  可以消除IE中不显示画面的错误。

  在测试页面切换或者页面中有元素动态加载或者显示的测试项时，建议调用browser.waitForAngularEnabled(true);可以防止因为浏览器未能完全加载app导致的错误。

• 在IE中运行E2E也需要配置es5配置项

  举例：

  "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "projects/mainpage/e2e/protractor.conf.js",
              "devServerTarget": "mainpage:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "mainpage:serve:production"
              },
              "es5": {
                "devServerTarget": "mainpage:serve:es5"
              }
            }
          }
  

  在启动时,使用下列命令指定配置文件以及编译的目标(使用IE仍需要安装ie的驱动包和测试服务器，由于测试服务器需要java环境，所以仍需要安装openJdk)

  ng e2e mainpage --prod --configuration es5 --protractor-config ./projects/mainpage/e2e/protractor-ie.conf.js --webdriver-update false

  举例，在package.json中添加如下指令，按需执行即可

  "scripts": {
      "e2e": "ng e2e mainpage --webdriver-update false",
      "e2e:setup": "npm-run-all -s e2e:setup:*",
      "e2e:setup:std": "webdriver-manager update --standalone --versions.standalone 3.141.59",
      "e2e:setup:ie": "webdriver-manager update --ie --versions.ie 3.150.1",
      "e2e:setup:chrome": "webdriver-manager update --chrome",
      "e2e:setup:status": "webdriver-manager status",
      "e2e:ie": "npm-run-all -s e2e:ie:*",
      "e2e:ie:driver": "webdriver-manager start --ie --versions.standalone 3.141.59 --versions.ie 3.150.1 --detach",
      "e2e:ie:runner": "ng e2e mainpage --prod --configuration es5 --protractor-config ./projects/mainpage/e2e/protractor-ie.conf.js --webdriver-update false",
      "e2e:ie:shutdown": "webdriver-manager shutdown",
      ...
      ...
    }
  

• IE浏览器需要在设置中将 secuity选项卡中四个配置(internet、localinternet...)的保护模式勾选去除。

文档报告生成

https://www.npmjs.com/package/protractor-jasmine2-html-reporter

• 生成报告需要使用插件(根据客户需求选用插件，下面的插件作为示例)

  • 使用npm安装插件 npm install protractor-jasmine2-html-reporter --save-dev

  • 在protractor.conf.js配置文件中注册插件(官网的注册方法经测试似乎并不适用，这里稍作改动)

    // 获取插件对象
    const Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
    ...
    exports.config = {
        ...
        ...
        
        onPrepare() {
    
        require('ts-node').register({
          project: require('path').join(__dirname, './tsconfig.json')
        });
        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
        // 添加插件配置
        jasmine.getEnv().addReporter(Jasmine2HtmlReporter({ savePath: './test/reports/' }));
      }
    }
    
    

  • 运行e2e测试即可自动生成带有截图的报告