Error: ENOENT: no such file or directory, open '/tmp/screenshot-gauge-js-Date.now().png'

[gs-yvaishnav]

Expected behavior
Screenshot should be available for gauge.screenshot();
Screenshot captured using await screenshot() should be rendered properly

Actual behavior
Screenshot not available for gauge.screenshot();
Screenshot captured using await screenshot() doesn't show any text

Steps to replicate

1. Create a gauge-js project (env/default/headless.properties --> headless_chrome = true)
2. Create a spec like below

cat specs/google.spec
# Google search
## Search Taiko Repository

* Goto google page
* Search for "taiko test automation"
* Page contains "taiko"

3. Create the step_implementation_google.js to like below`

cat tests/step_implementation_google.js
"use strict";
const { openBrowser, goto, write, click, text, screenshot, closeBrowser } = require('taiko');
const assert = require("assert");
const headless = process.env.headless_chrome.toLowerCase() === 'true';

beforeSuite(async () => {
await openBrowser({ headless: headless })
});

afterSuite(async () => {
await closeBrowser();
});

step("Goto google page", async () => {
await goto('https://google.com');
gauge.message("Custom message for report");
gauge.screenshot();
await screenshot({fullPage:true,path : './screenshot.png'});
});

step("Search for <query>", async (query) => {
await write(query);
await click('Google Search');
gauge.screenshot();
});

step("Page contains <content>", async (content) => {
assert.ok(await text(content).exists());
});

4. Run the spec
   gauge run specs/google.spec

5. Check the report

Doesn't show the screenshot

Two issues:

1. The screenshot captured using await screenshot({fullPage:true,path : './screenshot.png'}); is available in local dir. But the screenshot is not properly rendered.
   

2. The screenshot captured using screenshot.js throws error ENOENT: no such file or directory, open '/tmp/screenshot-gauge-js-1577354878911.png'. And this screenshot is not visible in HTML report.
   

Output
gauge run specs/google.spec
(node:32660) DeprecationWarning: grpc.load: Use the @grpc/proto-loader module with grpc.loadPackageDefinition instead
# Google search
## Search Taiko Repository Error: ENOENT: no such file or directory, open '/tmp/screenshot-gauge-js-1577354877202.png'
✔Error: ENOENT: no such file or directory, open '/tmp/screenshot-gauge-js-1577354878911.png'
✔ ✔

Successfully generated html-report to => /Git/Taiko/test/reports/html-report/2019-12-26 10.07.59/index.html
Specifications: 1 executed 1 passed 0 failed 0 skipped
Scenarios: 1 executed 1 passed 0 failed 0 skipped

Total time taken: 2.91s

My Environment:
gauge --version
Gauge version: 1.0.6
Commit Hash: 2bc49db

Plugins
-------
flash (0.0.1)
html-report (4.0.8)
js (2.3.6)
screenshot (0.0.1)

Doc:
https://docs.gauge.org/writing-specifications.html?os=linux&language=javascript&ide=vscode#adding-screenshots-in-reports

[BugDiver]

@gs-yvaishnav You need to use the custom screenshot feature method to capture a screenshot via taiko and send to reports.
Refer : https://docs.gauge.org/writing-specifications.html?os=windows&language=javascript&ide=vscode#taking-custom-screenshots

A working code sample is given below. Notice the last three lines which assign a custom screeen grabber method which will be invoked on call of gauge.screenshot()

"use strict";
const { openBrowser, goto, write, click, text, screenshot, closeBrowser } = require('taiko');
const assert = require("assert");
const headless = process.env.headless_chrome.toLowerCase() === 'true';

beforeSuite(async () => {
    await openBrowser({ headless: headless })
});

afterSuite(async () => {
    await closeBrowser();
});

step("Goto google page", async () => {
    await goto('https://google.com');
    gauge.message("Custom message for report");
    gauge.screenshot();
});

step("Search for <query>", async (query) => {
    await write(query);
    await click('Google Search');
    gauge.screenshot();
});

step("Page contains <content>", async (content) => {
    assert.ok(await text(content).exists());
});

gauge.screenshotFn = async function () {
    return await screenshot({ fullPage: true, encoding:"base64" }); 
}

[negiDharmendra]

@gs-yvaishnav Any update on this?

[sriv]

Closing this (potential answer). Feel free to comment/reopen if this needs further discussion.