演练：图片的比较

这里的步骤演示了如何使用图片比较API。在运行时获取控件截屏，并同模型中的图片比较，并将比较结果图片生成在报告中。示例中使用了Windows 10的计算器。

更多图片比较的信息可以参考：图像操作API，以及虚拟控件API

首先生成场景：

选择创建新项目，创建时使用Basic模板。并添加如下的场景内容。

  1.   场景: 控件图片比较
  2.     假如有一个控件按钮
  3.     那么检查控件与模型图片是否相同
  4.     而且生成比较图片

生成对象模型

针对计算器，获取其中的一个按钮的对象，并添加到模型中。例如这里我们添加了”5” 按钮：

演练：图片的比较 - 图1

实现场景代码

在definitions1.js中编写如下代码定义：

  1. const { AppModel } = require('leanpro.win');
  2. const { Image } = require('leanpro.visual');
  3. const { Given, When, Then } = require('cucumber');
  4. const model = AppModel.loadModel(__dirname + "\\..\\..\\test.tmodel");
  6. //// 你的步骤定义 /////
  7. Given("有一个控件按钮", async function () {
  8.     //take screenshots from controls
  9.     let five = model.getButton("Five");
  10.     let screen1 = await five.takeScreenshot();
  11.     let screen2 = await five.modelImage();
  13.     //clip the edges from the images
  14.     let controlImage = this.controlImage = await Image.fromData(screen1);
  15.     let modelImage = this.modelImage = await Image.fromData(screen2);
  17.     controlImage = controlImage.clip({ x: 10, y: 10, width: controlImage.width - 20, height: controlImage.height - 20 });
  18.     modelImage = modelImage.clip({ x: 10, y: 10, width: modelImage.width - 20, height: modelImage.height - 20  });
  20.     //put the images side by side, and attach to the report
  21.     let combinedImage = controlImage.drawImage(modelImage, controlImage.width + 10, 0);
  22.     this.attach(await combinedImage.getData(), 'image/png');
  23. });
  25. Then("检查控件与模型图片是否相同", async function () {
  26.     let result = await Image.imageCompare(this.controlImage, this.modelImage);
  27.     this.attach(JSON.stringify(result.info, null, 2), 'text/plain');
  28.     this.result = result;
  29. });
  32. Then("生成比较图片", async function () {
  33.     let data = await this.result.diffImage.getData();
  34.     this.attach(data, 'image/png');
  35. });

(请修改上面test.tmodel的路径，指向你自己的对象模型文件)

这个场景有三个步骤。第一个步骤定义中：

1.获取按钮”5”的屏幕截图，以及保存在模型中的截屏快照图片， 2.调用clip来剪切图像周围的10个像素边缘， 3.将这两个图像附加到World对象中，以便我们可以按照以下步骤进行比较， 4.调用drawImage将它们绘制成一个图像，并将其附加到报告中。

第二个步骤定义中：

  1. 从World对象中获取了两个处理过的截屏，调用imageCompare，返回比较数据，并将比较数据作为文本插入到对象模型中，
  2. 因为一个步骤的报表只能添加一组数据，所以如果要再添加图片，需要通过this.result = result将结果数据保存到World中，以便在下一个步骤中附加到报表中。

第三个步骤定义中：

  1. 从World对象获取图像数据，
  2. 调用this.attach()将图像附加到报告中。

运行

运行项目，可以看到图片比较的输出信息和比较结果图片都显示在了报告中：

演练：图片的比较 - 图2

因为控件的图片和模型比较后发现完全一致，所以场景运行通过。