Issue 1:
In the following code, playwirght is not able to recognize the click event on search button.

When i ran the application in debug mode even the debug statement is not capturing the details of the search image click.

Search result are displayed but there is no trace of click statement in debug logs. It was working lat week but started failing earlier this week.

Since the click event is not triggered so the playwright scripts gets hanged while waiting for the below line in the code

await page.getByTestId('close-icon-search-employeeId').click();

System info

Playwright Version: Version 1.30.0

Operating System: macOS Ventura - Version 13.2.1 (22D68)

Browser: [All, Chromium, Firefox, WebKit]

Other info:

Source code

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

test('test', async ({ page }) => {
import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
await page.goto('https://qe.east.1.crewbid.dev.swalife.com/');
await page.goto('https://sso.fed.dev.aws.swacorp.com/as/authorization.oauth2?redirect_uri=https%3A%2F%2Fqe.east.1.crewbid.dev.swalife.com%2Fcallback&client_id=p501609&response_type=code&state=whTxY4zt5u&scope=openid%20email%20profile%20address%20phone&code_challenge=48cXQ7_GxbcZAqJtJDsIep5QK-XjHcj1yvBHFaK7ewM&code_challenge_method=S256');
await page.locator('#password').click();
await page.locator('#password').fill('import { test, expect } from \'@playwright/test\'; test(\'test\', async ({ page }) => { await page.goto(\'https://qe.east.1.crewbid.dev.swalife.com/\'); await page.goto(\'https://sso.fed.dev.aws.swacorp.com/as/authorization.oauth2?redirect_uri=https%3A%2F%2Fqe.east.1.crewbid.dev.swalife.com%2Fcallback&client_id=p501609&response_type=code&state=vXUnnB9JPJ&scope=openid%20email%20profile%20address%20phone&code_challenge=YUzDinI4WMcfQpw3x_RWK2H6fF64dSIeUUHBpHF9ARA&code_challenge_method=S256\'); await page.locator(\'#username\').click(); await page.locator(\'#username\').fill(\'e5050\'); await page.locator(\'#password\').click(); await page.locator(\'#password\').fill(\'N2ZyfeZS\'); await page.getByText(\'Submit\').click(); await page.getByTestId(\'card-button-IFVacationCrewAuction\').click(); await page.getByTestId(\'navigation-link-IFVacationCrewReportLinks\').click(); await page.getByTestId(\'navigation-link-IFVacationCrewReportsLowestSeniorityAwards\').click(); await page.getByRole(\'link\', { name: \'Back\' }).click(); await page.getByTestId(\'navigation-link-IFVacationCrewReportsSeniorityListItems\').click(); await page.getByTestId(\'search-employeeId\').click(); await page.getByTestId(\'search-employeeId\').fill(\'5050\'); });');
await page.locator('#password').press('Meta+a');
await page.locator('#password').fill('');
await page.locator('#password').click();
await page.locator('#password').fill('N2ZyfeZS');
await page.locator('#username').click();
await page.locator('#username').fill('e5050');
await page.getByText('Submit').click();
await page.getByTestId('card-button-IFVacationCrewAuction').click();
await page.getByTestId('navigation-link-IFVacationCrewReportLinks').click();
await page.getByTestId('navigation-link-IFVacationCrewReportsSeniorityListItems').click();
await page.getByTestId('search-employeeId').click();
**await page.getByTestId('search-employeeId').fill('5050');**
});

Test file (self-contained)

it('should check the box using setChecked', async ({ page }) => {
await page.setContent(`<input id='checkbox' type='checkbox'></input>`);
await page.getByRole('checkbox').check();
await expect(page.getByRole('checkbox')).toBeChecked();
});

Steps

[Run the test]

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

test.only('crew member validates the seniority list report', async ({page, screen, within, isMobile, crewMemberActor}) => {
await crewMemberActor.asks(Elements.toBe.visible('QUICK LINKS'));
await page.waitForTimeout(3000);
await getBidRound(page, screen, within, isMobile, crewMemberActor);

await crewMemberActor.attemptsTo(Click.on().textName('All Reports'));

await crewMemberActor.attemptsTo(Click.on().textName('Seniority List'));
await crewMemberActor.asks(ValidatePageTitleContent.toContainText('page-title-component', 'Seniority List'));
await crewMemberActor.asks(ValidatePageTitleContent.toContainText('page-sub-title-container', `${biddingYear} Vacation`));
await crewMemberActor.asks(Elements.toBe.visible('Accruals'));
await crewMemberActor.asks(TableHeader.containsHeader('paged-table-IFVacationCrewReportsSeniorityListItems'));
//await performEmployeeSearch(page, screen, within, isMobile, crewMemberActor, 'search-employeeId');

await page.getByTestId('search-employeeId').click();
await page.getByTestId('search-employeeId').fill('5050');
await page.waitForTimeout(5000);

**await page.getByTestId('search-icon-search-employeeId').click();**

await crewMemberActor.asks(Elements.to.containText('id','td-IFVacationCrewReportsSeniorityListItems-employeeId-0','5050'))

await page.getByTestId('close-icon-search-employeeId').click();
await crewMemberActor.asks(Elements.to.containText('id','td-IFVacationCrewReportsSeniorityListItems-seniority-1','2'))
await crewMemberActor.attemptsTo(Click.on().textName('Back'));
await crewMemberActor.asks(Elements.toBe.visible('All Reports'));

})

[...]

Expected

When you search with an employeed id it is expected to work

Actual

The system is hanging and test case is failing as its not able to recognize the search button

[Describe actual behavior]

locator.click: Target closed
=========================== logs ===========================
waiting for getByTestId('search-icon-search-employeeId')
locator resolved to visible <button disabled type="button" class="css-1l3rrrl" aria-…>…</button>
attempting click action
waiting for element to be visible, enabled and stable
element is not enabled - waiting...
============================================================
Following error is observed in the broswer. the code attached above is from the file - senioritylist.report.spec.js:72:63

70 | await page.waitForTimeout(5000);
71 | //await crewMemberActor.asks(Elements.toBe.visible('Accruals'));
> 72 | await page.getByTestId('search-icon-search-employeeId').click();
| ^
73 | // await page.getByTestId('search-icon-search-employeeId').click();
74 |
75 | await crewMemberActor.asks(Elements.to.containText('id','td-IFVacationCrewReportsSeniorityListItems-employeeId-0','5050'))

at /Users/x287202/SouthWest/code/new-aap/develop/test/cbna-test-integration-cbna/test-ui/playwright/tests/crewmember/reports/senioritylist.report.spec.js:72:63

Issue 2:
Hi, I have long term scenario which is interdependent and I am currently using the following structure.

test.describe.serial('create / modify / destroy', () => {
test('setup', async () => {
.......
});
test('modify', async () => {
.......
});
test('destroy', async () => {
.......
});
});

I was wondering if I move the above test to the following structure, does it impact the interdependency in any way (retries enabled)? Also, I guess I am trying to understand when I would use .serial vs .step?

test('create / modify / destroy', () => {
await test.step('setup', async () => {
.......
});
await test.step('modify', async () => {
.......
});
});