[BUG] Target closed that has something to do with iframe and websocket

[Evilweed]

Context:

• Playwright Version: v1.17.1
• Browser: Chromium System: OS: macOS 11.6 Memory: 33.79 MB / 16.00 GB Binaries: Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm Languages: Bash: 3.2.57 - /bin/bash

Code Snippet

I've sent Basic Auth and Login credentials that need to be added to scripts below over email to @dgozman as we cannot just publicly give access to our server. If you want me to send them to some other Microsoft employee, please let me know

const basicAuthLogin = '' // User reporting this bug will send you credentials over email
const basicAuthPassword = '' // User reporting this bug will send you credentials over email

const config: PlaywrightTestConfig = {
    timeout: 180000,
    forbidOnly: !!process.env.CI,
    testDir: 'specs',
    use: {
        actionTimeout: 30000,
        headless: !!process.env.CI,
        viewport: { width: 1280, height: 720 },
        ignoreHTTPSErrors: true,
        video: 'on',
        trace: 'retain-on-failure',
        httpCredentials: {
            username: basicAuthLogin,
            password: basicAuthPassword,
        },
    },
}
export default config

import test, { expect } from '@playwright/test'

const login = '' // User reporting this bug will send you credentials over email
const password = '' // User reporting this bug will send you credentials over email

test.describe('test', () => {
    test.only('test', async ({ page }) => {
        await page.goto(`https://platform.fuji.dev.packhelp.com/sma/offers/new`)

        await page.click('[placeholder="you@youremail.com"]')
        await page.fill('[placeholder="you@youremail.com"]', login)

        await page.press('[placeholder="you@youremail.com"]', 'Tab')
        await page.fill('[placeholder="Password (at least 6 characters)"]', password)
        await Promise.all([
            page.waitForNavigation(),
            page.press('[placeholder="Password (at least 6 characters)"]', 'Enter'),
        ])

        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator('select[name="zpkj_offer[user_id]"]')
            .selectOption('1754968')

        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator('select[name="zpkj_offer[qualified_by_id]"]')
            .selectOption('9502262')

        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator('select[name="zpkj_offer[estimated_by_id]"]')
            .selectOption('2924311')

        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator(
                '[placeholder="Short company name, ie.: \'coca-cola-inc\'. Allowed characters: letters, digits, - and _"]'
            )
            .click()
        await page.pause()
        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator(
                '[placeholder="Short company name, ie.: \'coca-cola-inc\'. Allowed characters: letters, digits, - and _"]'
            )
            .fill('asdafsdfasfcsaw3142213')

        await page.keyboard.press('Tab')

        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator('text=January 2022SuMoTuWeThFrSa >> :nth-match(i, 2)')
            .click()

        await page.frameLocator('iframe[class*="PCS"]').nth(0).locator('body').locator('text=28').first().click()

        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator('input[name="zpkj_offer[client_email]"]')
            .click()

        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator('input[name="zpkj_offer[client_email]"]')
            .fill('asidhasdhasd@asdasudhasuhdsa.pl')

        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator('select[name="zpkj_offer[custom_region]"]')
            .selectOption('eu')

        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator('select[name="zpkj_offer[custom_locale]"]')
            .selectOption('es')

        await page
            .frameLocator('iframe[class*="PCS"]')
            .nth(0)
            .locator('body')
            .locator('[placeholder="https://app.futuresimple.com/sales/deals/<dealId>"]')
            .fill('https://app.futuresimple.com/sales/deals/012345678')

        // Click text=Create
        await Promise.all([
            page.waitForNavigation(/*{ url: 'https://platform.fuji.dev.packhelp.com/sma/offers/details/29669' }*/),
            page
                .frameLocator('iframe[class*="PCS"]')
                .nth(0)
                .locator('body')
                .locator('text=Create')
                .first()
                .click(),
        ])
    })
})

Describe the bug

Test fails with Target Closed whenever we are clicking submit button in iFrame - While digging in Playwright code node_modules/playwright-core/lib/server/chromium/crConnection.js:226, we have found out that issue is related also to Websocket (see screenshot below). We have a website that contains iFrame and in this iFrame we are loading some other part of website. There are scripts that replace URL's and show loading spinners inside iFrame.

I've tried to create smallest possible case without using our app, but i guess there is many moving blocks and some race condition, and was unable to recreate it, so this case uses our app.

I've sent Basic Auth and Login credentials that need to be added to scripts over email to @dgozman as we cannot just publicly give access to our server. If you want me to send them to some other Microsoft employee, please let me know

Redacted log file:

log.txt

Screenshot of issue debugging:

[Evilweed]

@dgozman I've sent you basic auth and login credentials over email.

[aslushnikov]

(Over to Dmitry since he has some credentials now to reproduce this!)

[dgozman]

This seems the same issue as #10375, which was fixed by #10518 and will be available in 1.18 release. That also explains why I can repro the issue with v1.17.1, but not on the main.

Until 1.18 is out, you can try the unstable version with npm install -D @playwright/test@next.