Highlighting is off [Windows]

[srp-at-ema]

Describe the bug

Highlighting is off as you can see on the attached .GIF

What command(s) did you run when you found the bug?

mkdir ptg
cd ptg
gauge init js
open the ptg folder in vscode
npm init.
I click on Run Spec above # Getting Started with Gauge

Output, stack trace or logs related to the bug

Maybe related is the following output from gauge init js:

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  Verion 9 of Highlight.js has reached EOL.  It will no longer
  be supported or receive security updates in the future.
  Please upgrade to version 10 or encourage your indirect
  dependencies to do so.

  For more info:
  https://github.com/highlightjs/highlight.js/issues/2877
  https://github.com/highlightjs/highlight.js/blob/master/VERSION_10_UPGRADE.md

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*                                              

Versions

Gauge (Output of gauge -v)

gauge -v
Gauge version: 1.1.5
Commit Hash: f455126

Plugins
-------
html-report (4.0.12)
js (2.3.14)
screenshot (0.0.1)

Node.js/Java/Python/.Net/Ruby version

node -v
v14.15.1

Operating System information

Get-ComputerInfo -Property os* | select OSName, OsArchitecture | fl

OsName         : Microsoft Windows 10 Pro
OsArchitecture : 64-bit

IDE information

code-insiders.cmd --version
1.52.0-insider
6026ab576dc6a4fbb8e255241a364816f42464c5
x64

[zabil]

Verion 9 of Highlight.js

Taiko's uses another API for highlighting elements on the page. The error message is because the highlight package used by another dependency for generating documentation is outdated.

It looks like the web page is not rendered correctly on windows/chrome which is causing with the wrong highlights.

[zabil]

I am unable to replicate this on windows. Was this one off or do you see it happening again? As the page does not seem to render correctly, it could've been a network issue. Can you please confirm that you see this consistently?

[srp-at-ema]

I see that every time, but it's bound to one machine. I tried another computer where it is fine.

[srp-at-ema]

Do you have any idea in which direction to investigate? Both computers run Windows.

[zabil]

If you have chrome or chromium installed on the machine can you try opening https://todo.taiko.dev and inspecting the browser console or network tabs (in developer tools) to see if there are any errors? Also to see if the page is rendered correctly with reference to the screen grab I posted.

[srp-at-ema]

I see what you mean with not rendering. I had lowered the quality of the GIF before uploading it. Opening https://todo.taiko.dev/ in Chrome and it's looking good.

[srp-at-ema]

I see the same two errors in the Chrome console whether I open the https://todo.taiko.dev/ in Chrome or I quickly do a F12 when the test is executing. Nothing more, nothing less.

[zabil]

I see the same two errors

What's the exact error you see on the console?

[srp-at-ema]

[zabil]

I see that every time, but it's bound to one machine.

Ok, that's very strange. Can you try deleting the node_modules folder so that the latest versions of chromium and taiko is downloaded again?

[srp-at-ema]

I modified the example to use google and enter a search term. Same problem, the highlight is below to the right.

[srp-at-ema]

This last shot is from a different project than the initial one. After deleting node_modules, am I supposed to npm install or something else? For when I call gauge run specs it is not working anymore.

[zabil]

You can get all the dependencies back after running

npm install

In your project folder.

[srp-at-ema]

So I did exactly that (npm install). But as expected it has not changed much.

[srp-at-ema]

Thanks for your help by the way. Much appreciated. And it's no high prio, as it works in my work remote environment, just not on my own laptop.

[srp-at-ema]

I found it! I have a 4k screen:

[srp-at-ema]

If I go to 100% it's ok.

[srp-at-ema]

Is that a bug or a limitation? Thank you.

[zabil]

Oh wow, good catch. This should not be happening, it could be a bug. Will take a look at it soon.

[zabil]

Closing this as the zoom value should be 100% for the highlight to work.