Added E2E execution plan tests with coverage

[laurennat]

Set up playwright infrastructure for collecting coverage on react webviews and testing react webviews. There's also a few really minor changes to some Execution Plan react components, which just make it easier to playwright test them.

[github-actions]

PR Changes

Category	Main Branch	PR Branch	Difference
Code Coverage	51.21%	53.18%	$${\color{lightgreen} 1.97\% }$$
VSIX Size	13004 KB	12985 KB	$${\color{lightgreen} -19 KB \space (0\%) }$$
Webview Bundle Size	3228 KB	3232 KB	$${\color{lightgreen} 4 KB \space (0\%) }$$

[caohai]

This is also only for local testing.

Are you planning to add these tests to the CI pipeline in a seperate PR?

[laurennat]

Yes, I'm adding it in later

[aasimkhan30]

Using the example, I was able to access elements inside the webviews. I opened the connection dialog, found the webview iframe, located the profile name field, and filled it in with a dummy profile name.

   const connectionDialogFrame = vsCodePage
        .frameLocator(".webview")
        .frameLocator("[title='Connection Dialog (Preview)']");

    if (connectionDialogFrame) {
        const inputField = connectionDialogFrame.getByLabel("Profile Name");
        await expect(inputField).toBeVisible({ timeout: 10000 });
        const isInputFieldVisible = await inputField.isVisible();
        if (isInputFieldVisible) {
            await inputField.fill("Server Name");
        }
    }

[caohai]

Using the example, I was able to access elements inside the webviews. I opened the connection dialog, found the webview iframe, located the profile name field, and filled it in with a dummy profile name.

   const connectionDialogFrame = vsCodePage
        .frameLocator(".webview")
        .frameLocator("[title='Connection Dialog (Preview)']");

    if (connectionDialogFrame) {
        const inputField = connectionDialogFrame.getByLabel("Profile Name");
        await expect(inputField).toBeVisible({ timeout: 10000 });
        const isInputFieldVisible = await inputField.isVisible();
        if (isInputFieldVisible) {
            await inputField.fill("Server Name");
        }
    }

This looks great!

[laurennat]

Using the example, I was able to access elements inside the webviews. I opened the connection dialog, found the webview iframe, located the profile name field, and filled it in with a dummy profile name.

   const connectionDialogFrame = vsCodePage
        .frameLocator(".webview")
        .frameLocator("[title='Connection Dialog (Preview)']");

    if (connectionDialogFrame) {
        const inputField = connectionDialogFrame.getByLabel("Profile Name");
        await expect(inputField).toBeVisible({ timeout: 10000 });
        const isInputFieldVisible = await inputField.isVisible();
        if (isInputFieldVisible) {
            await inputField.fill("Server Name");
        }
    }

This looks great!

I'll change the tests to this format! thanks for finding this

[Benjin]

Do you know what's going on here?

[laurennat]

Do you know what's going on here?

This was fixed, but it couldn't overwrite the results because the pipeline was broken :( Now it's good though!

[laurennat]

@lewis-sanchez is merging for me because I still have the merge permissions issue