Can I link my images into the report ?

[zhengyanan1]

now, if I set useOnAfterCommandForScreenshot equals true, the screenshot will be linked into the report.

my question is how to link my images into the report?(my images means the images which is not generated by screenshot)

[rpii]

You can always add / modify the code below to your base page object and then invoke it to add an arbitrary image to the report

import ReportEvents from @.***/wdio-report-events" ; let eventReporter = new ReportEvents() ;

public logMessage(message:string) {
    eventReporter.logMessage( message)
}

public takeScreenshot(message:string) {
    const timestamp = dayjs().format('YYYYMMDD-HHmmss.SSS');
    fs.ensureDirSync('reports/html-reports/screenshots/');
    const filepath = path.join('reports/html-reports/screenshots/',

timestamp + '.png'); browser.saveScreenshot(filepath); this.logMessage(message); return this; }

On Thu, Apr 21, 2022 at 8:54 PM NobodyZheng @.***> wrote:

[image: image] https://user-images.githubusercontent.com/16793425/164592494-b8474f96-a591-4da8-a525-819bbbc79a24.png

[image: image] https://user-images.githubusercontent.com/16793425/164592746-ae39b276-5a9d-4947-9073-22bc8a483d30.png

now, if I set useOnAfterCommandForScreenshot equals true, the screenshot will be linked into the report.

my question is how to link my images into the report?(my images means the images which is not generated by screenshot)

— Reply to this email directly, view it on GitHub https://github.com/rpii/wdio-html-reporter/issues/85, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEABIEKN7ZEJSTAUP75YUFLVGIPCXANCNFSM5UBBYIEQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[zhengyanan1]

sorry..... I can't understand where and how to add the code you metioned above。

here is my config files，can you explain it more clearly ?

config.zip

More detail, what I want to do is:

1. first, there will be a base image.
2. then , I run appium ui automation test, capture a screenshoot
3. next, I will compare the base image and the screenshoot. if they are not same, i will generate a diff image. So, my question is how to link other images into the report?(in my case, other images means a base image and a diff image)

[rpii]

Unfortunately that image does not help. add the code below and provide the filepath to the image file you want in the report at the location in a test where you want it

    browser.saveScreenshot(filepath);
    this.logMessage(message);

On Sat, Apr 23, 2022 at 8:08 PM NobodyZheng @.***> wrote:

sorry..... I can't understand where and how to add the code you metioned above。

here is my config files，can you explain it more clearly ? <img width="611" alt="image" src=" https://user-images.githubusercontent.com/16793425/164954481-5591aced-8dfc-4002-ab8b-68fa2493eae9.png " config.zip https://github.com/rpii/wdio-html-reporter/files/8548967/config.zip

— Reply to this email directly, view it on GitHub https://github.com/rpii/wdio-html-reporter/issues/85#issuecomment-1107694917, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEABIEIEDWGO4ZKJ422YJA3VGS3F7ANCNFSM5UBBYIEQ . You are receiving this because you commented.Message ID: @.***>

[zhengyanan1]

Try as you suggest, here are two questions:

1. It seems doesn't work. I add browser.saveScreenshot(filepath); into a test case. it doesn't link the image related to the filepath into the report, but capture a screenshot linked into the report and copy this screenshot to the filepath.

   

2. this.logMessage(message); this means what ? message means what?

   

[rpii]

Sorry,

I gave you the wrong stuff.

        emit(event: "test:screenshot", filename: string): boolean;

will allow you to add an image to the report. there is an easier way inside of report_events, but this will work

Rich

On Sun, Apr 24, 2022 at 7:39 PM NobodyZheng @.***> wrote:

Try as you suggest, here are two questions:

1. It seems doesn't work. I add browser.saveScreenshot(filepath); into a test case. it doesn't link the image related to the filepath into the report, but capture a screenshot linked into the report and copy this screenshot to the filepath.

[image: image] https://user-images.githubusercontent.com/16793425/165010931-db912213-8a2e-441b-9e60-5469eb0f11c5.png

1. this.logMessage(message); this means what ? message means what?

[image: image] https://user-images.githubusercontent.com/16793425/165011538-08a4378b-3cd4-4927-a887-1cd9db96df59.png

— Reply to this email directly, view it on GitHub https://github.com/rpii/wdio-html-reporter/issues/85#issuecomment-1108005107, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEABIENJ4VKY4Q22L2Z46IDVGYAR5ANCNFSM5UBBYIEQ . You are receiving this because you commented.Message ID: @.***>

[zhengyanan1]

Sorry, I gave you the wrong stuff. emit(event: "test:screenshot", filename: string): boolean; will allow you to add an image to the report. there is an easier way inside of report_events, but this will work Rich … On Sun, Apr 24, 2022 at 7:39 PM NobodyZheng @.> wrote: Try as you suggest, here are two questions: 1. It seems doesn't work. I add browser.saveScreenshot(filepath); into a test case. it doesn't link the image related to the filepath into the report, but capture a screenshot linked into the report and copy this screenshot to the filepath. [image: image] https://user-images.githubusercontent.com/16793425/165010931-db912213-8a2e-441b-9e60-5469eb0f11c5.png 1. this.logMessage(message); this means what ? message means what? [image: image] https://user-images.githubusercontent.com/16793425/165011538-08a4378b-3cd4-4927-a887-1cd9db96df59.png — Reply to this email directly, view it on GitHub <#85 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEABIENJ4VKY4Q22L2Z46IDVGYAR5ANCNFSM5UBBYIEQ . You are receiving this because you commented.Message ID: @.>

Oh!!! emit(event: "test:screenshot", filename: string): boolean; I don't know how to use this. but after reading the source code， I understand this sentence there is an easier way inside of report_events,

what I do is in the following , it works!

import ReportEvents from "@rpii/wdio-report-events" ;
let eventReporter = new ReportEvents() ; // 用于把自己想要的图片插进测试报告
...
eventReporter.logScreenshot(imgUrlExpected)
eventReporter.logScreenshot(imgUrlDiff)
...

thank you!