search

microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
https://playwright.dev
Apache License 2.0
65.69k stars 3.58k forks source link

[BUG] HTML will not load when webkit browser is being used. #5976

Closed brism17 closed 3 years ago

brism17 commented 3 years ago

Context:

Code Snippet await this.page.setContent(notebookPageContent); private notebookPageContent(pageContentParams: INotebookPageContentParams) { const { loadOptions, mode, notebookContent, snippets, iframeSandboxHostUrl } = pageContentParams; const optionsJson = stringifyOptions(loadOptions); const notebookContentJson = notebookContent ? JSON.stringify(notebookContent) : "undefined"; const snippetsJson = snippets ? JSON.stringify(snippets) : "undefined"; const headerScript = pageContentParams.headerScript || ""; const iframeSandboxHostUrlValue = iframeSandboxHostUrl ? "${iframeSandboxHostUrl}" : undefined;

return `
  <!DOCTYPE html>
  <html>
    <head>
      <link href="${this.componentBasePath}/aznb-bundle.css" rel="stylesheet" />
      <script type="text/javascript">${headerScript}</script>
      <script
        type="text/javascript"
        src="${this.componentBasePath}/aznb-bundle.js"
      ></script>
      <style>
        html,
        body,
        #${loadOptions.parentElementId} {
          margin: 0px;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <div id="${loadOptions.parentElementId}"></div>
      <script>
         window.perfMark = window.perfMark||(()=>{});
         const mode = "${mode}";
         window.aznb = AzureNotebooks;

         console.log("Component version is " + AzureNotebooks.version);

         async function walkthrough() {
           window.aznberrors = [];
           document.getElementById("${
             loadOptions.parentElementId
           }").addEventListener("aznb-error", (error) => window.aznberrors.push(error));

           perfMark("init-begin");
           await AzureNotebooks.init({
             userHasGivenCookieConsent: true,
             features: {
               snippets: {
                 enableSnippets: ${snippets ? "true" : "false"}
                }
              },
             getResourceAccessToken: () =>
               Promise.resolve({
                 notebookResourceId: "<resourceId>",
                 accessToken: "<access_token>",
                 refreshToken: "<refresh_token>"
               }),
             resourceUrl: "${this.notebookService.serverUrl}",
             iframeSandboxHostUrl: ${iframeSandboxHostUrlValue}
           });
           perfMark("init-end");

           if (${snippetsJson}) {
            AzureNotebooks.intelliSense.snippets?.addRange("python", ${snippetsJson});
           }

           const options = ${optionsJson};

           if (mode === "create") {
             AzureNotebooks.onCreateNotebook(onNotebookRendered);

             let nbcontent = ${notebookContentJson};

             if(!nbcontent) {
                const contentResponse = await fetch(options.filePath);
                const content = await contentResponse.text();
                const model = JSON.parse(content);
                nbcontent = model.content || model;
             }

             perfMark("load-begin");
             window.nb = await AzureNotebooks.createNotebook(options, JSON.stringify(nbcontent));
           } else {
             AzureNotebooks.onLoadNotebook(onNotebookRendered);

             perfMark("load-begin");
             window.nb = await AzureNotebooks.loadNotebook(options);
           }
         }

         const onNotebookRendered = async (event) => { 
           setTimeout(()=>{
            perfMark("load-onloaded-event");
            window.notebookLoaded = true;
          }, 0);
         };

         walkthrough();
       </script>
    </body>
  </html>
`;

}

Describe the bug

The set content call is timingout even after the timeout is increased to 60 seconds. No issues when I try to load the same html in firefox or chromium browser. Sometimes some of our tests succeed when playwright is run in headful mode but never in headless mode. I notice that our component doesn't fully load in headful mode (the icons are missing) but the tests will still succeed some of the time. Is there something special we need to do to our html to load in webkit browser ? I have attached the full files for one of our tests that appears to be failing as well as our implementation of a class called NotebookPage which is what we are setting our page content too. Playwright bug files.zip

Add any other details about the problem here.

pavelfeldman commented 3 years ago

It is unclear if this is a bug in Playwright or a bug in the test. I can see that you are setting html with links via page.setContent. That only works if all the link in that html are absolute, otherwise browser does not know how to resolve them. Given that you have a server in place, you probably want to serve this file instead.

pavelfeldman commented 3 years ago

We need more details in order to be able to address this issue, namely answer to the above. I'll close this bug as non-actionable, but if this still happens to you, could you please file a new issue with the log dump and link this one?