• 演练：图片的比较
    • 首先生成场景：
    • 生成对象模型
    • 实现场景代码
    • 运行

    演练：图片的比较

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

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

    首先生成场景：

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

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

    生成对象模型

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

    演练：图片的比较 - 图1

    实现场景代码

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

    1. const { TestModel } = require('leanpro.win');
    2. const { Image } = require('leanpro.visual');
    3. const { Given, When, Then } = require('cucumber');
    4. const model = TestModel.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将它们绘制成一个图像，并将其附加到报告中。

    第二个步骤定义中：

    • 从World对象中获取了两个处理过的截屏，调用imageCompare，返回比较数据，并将比较数据作为文本插入到对象模型中，

    • 因为一个步骤的报表只能添加一组数据，所以如果要再添加图片，需要通过this.result = result将结果数据保存到World中，以便在下一个步骤中附加到报表中。第三个步骤定义中：

    • 从World对象获取图像数据，

    • 调用this.attach()将图像附加到报告中。

    运行

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

    演练：图片的比较 - 图2

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