GithubHelp home page GithubHelp logo

Comments (9)

odockal avatar odockal commented on June 12, 2024 1

@axel7083 Awesome work here!
After narrowing down the possible places of issue, it seems that having webview-preload init function being only available when not having VITEST set is the root cause of webview not being available in development mode.
Removing the if block here: https://github.com/containers/podman-desktop/blob/main/packages/preload-webview/src/index.ts#L39 let the webview to load correctly when running e2e tests.
We need to make sure that init function is available when running e2e tests.

from podman-desktop.

cbr7 avatar cbr7 commented on June 12, 2024

webview_error

I'm not sure if it's related or not, but I've added a screenshot of a warning from the webview console, where the same file VM4_sandbox_bundle is referenced as in the error from the main PD console.

Is it possible that some kind of security policy is preventing the dom-ready event from being emitted?

from podman-desktop.

odockal avatar odockal commented on June 12, 2024

@cbr7 TBH I have not seen the dom-ready not being omitted error when running the developer mode at all. Or it is that error is actually consumed somewhere?
I tried to debug the application and found a difference between running in dev mode and the one built locally, but I do not see exact point of failure.

I suspect that there might not be a problem on podman-desktop side, might be in the extension and how it takes over meta variable. Or maybe the problem lays somewhere around http server that should take care of dom elements recreation on podman desktop side. Server is running, I just do not know if it receives the request and if responds anything. I am just judging as there is missing iframe dom element in the dom structure once the button is clicked in podman-desktop devleopment mode.

from podman-desktop.

odockal avatar odockal commented on June 12, 2024

Reproducer on my branch: https://github.com/odockal/podman-desktop/tree/webview-repro

git clone [email protected]:odockal/podman-desktop.git
# git remote add odockal [email protected]:odockal/podman-desktop.git
git fetch odockal
git checkout odockal/webview-repro

yarn
# test:e2e build podman-desktop locally in dev mode
# once you have it built, you can re-run e2e tests faster by using test:e2e:run
yarn test:e2e
# yarn test:e2e:run

The tests contain only one e2e tests (tests/playwright/src/specs/bootc-extension.spec.ts) that will spin up podman-desktop in dev mode, and installs bootc extension. Then there is a a hard coded timeout at line 88. which will wait a minute for exploration. can be adjusted of course, the test itself has 200s hard limit, can also be adjusted.
Once the extension is installed, bootc nav bar item appears, if you click it you would expect bootc webview to be shows. It is not.

from podman-desktop.

axel7083 avatar axel7083 commented on June 12, 2024

Following my investigation here are my results

webview-preload.ts

Let's deep dive into the preload script, which is the one responsible of reloading the content when the extension update its html.

I added 3 console.log visible when running through in yarn watch
image

However when running with yarn test:e2e nothing appears in the console.log

image

The preload script does not seems to be working and that seems to be the source of the problem.

To verify that the content of a webview/iframe could be visible from playwrite, I replaced the following lines

podman-desktop/packages/main/src/plugin/webview/webview-registry.ts

Lines 122 to 125 in 0698e4d

if (req.path === '/') {
res.send('<html></html>');
return;
}

ℹī¸ the code above, send the default content to the webview, before the extension is able to change it.

with some html with identifiable content

<html style="color: white;">
  <div role="banner" aria-label="banner that should be removed">
      Hello from webview (this should be removed after preload)
  </div>
</html>

And during the test:e2e I got the following as expected
image

Then through the following code I was able to ensure the banner hardcoded was visible by playwright

const iframes = pdRunner.getElectronApp().windows().map(window => window.frames()).flat();
for (const iframe of iframes) {
  const count = await iframe.page().getByRole('banner', { name: 'banner that should be removed'}).count();
  console.log(`iframe ${iframe.url()} => ${count}`);
}

output:

stdout | tests/playwright/src/specs/bootc-extension.spec.ts > BootC Extension > Open webview
iframe file:///C:/Users/axels/Documents/github/redhat/podman-desktop/packages/renderer/dist/index.html#/webviews/0 => 0

stdout | tests/playwright/src/specs/bootc-extension.spec.ts > BootC Extension > Open webview
iframe about:blank => 0

stdout | tests/playwright/src/specs/bootc-extension.spec.ts > BootC Extension > Open webview                                                                                                                                        
iframe http://7304a1bd-1199-4e37-9ac3-054095428031.webview.localhost:44000/?webviewId=0 => 1

We can clearly see in the last one, that we got the expected Locator based on the role and aria label.

Conclusion

Even tho I am not able to understand why the preload script is not loaded when using the yarn test:e2e IMO the issue is coming from Podman Desktop and not Playwright.

from podman-desktop.

benoitf avatar benoitf commented on June 12, 2024

good investigation work 👍

from podman-desktop.

benoitf avatar benoitf commented on June 12, 2024

@odockal I don't know why I'm the assignee here, I didn't do stuff

from podman-desktop.

odockal avatar odockal commented on June 12, 2024

@benoitf you did a fix, right? :)

from podman-desktop.

benoitf avatar benoitf commented on June 12, 2024

fixed by #6842

from podman-desktop.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤ī¸ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.