Я создал сценарий Cypress, который прекрасно обрабатывает процедуру входа в Microsoft. Это выглядит так:
beforeEach(() => {
cy.visit('https://backoffice.iqos.com/backoffice/login.zul', { failOnStatusCode: false, timeout: 30000 }).then(() => {
cy.log('Visited the URL successfully');
}).wait(1000);
});
it('should test the replacement matrix', () => {
cy.get('div.singlesignon_login_cell')
.contains('Login with Single Sign On')
.should('exist')
.click({ force: true })
.wait(20000);
cy.origin('https://login.microsoftonline.com', () => {
cy.get('#i0116.form-control.ltr_override.input.ext-input.text-box.ext-text-box', { timeout: 10000 })
.should('have.attr', 'placeholder', 'Email address, phone number or Skype')
.type("EMAIL HERE")
.wait(1000);
cy.get('.win-button.button_primary.high-contrast-overrides.button.ext-button.primary.ext-primary')
.contains('Next')
.should('exist')
.click({ force: true })
.wait(5000);
cy.get('#i0118.form-control.input.ext-input.text-box.ext-text-box', { timeout: 10000 })
.should('exist')
.type("PASSWORD HERE")
.wait(1000);
cy.get('input#idSIButton9.win-button.button_primary.high-contrast-overrides.button.ext-button.primary.ext-primary')
.should('exist')
.click({ force: true })
.wait(30000);
});
Таким образом, он в основном открывает страницу входа в систему для программного обеспечения SAP, которое мы используем, затем перенаправляется на интегрированный вход в систему Microsoft, вставляет адрес электронной почты и пароль и успешно проходит через него.
Теперь я хочу воссоздать ту же процедуру с Драматургом. Я пробовал некоторые решения, выполняя те же действия, что и команды драматурга, но по какой-то причине застрял. Часть, где я всегда застреваю, - это после нажатия кнопки «Войти с помощью единого входа», которая должна открыть страницу входа в Microsoft (туда, где пользователя просят ввести свое имя пользователя или адрес электронной почты), но это не так.
Вот сценарий, который я пытался запустить в Playwright. Он не прошел процедуру входа в Microsoft. По сути, это застряло в тот момент, когда Драматург должен был открыть страницу входа в Microsoft.
test.describe('Replacement Matrix test', () => {
test('should test the replacement matrix', async ({ page, context }) => {
await page.goto('https://backoffice.iqos.com/backoffice/login.zul', { waitUntil: 'load', timeout: 30000 });
console.info('Visited the URL successfully');
await page.waitForTimeout(1000);
// Click the 'Login with Single Sign On' button
await page.locator('div.singlesignon_login_cell', { hasText: 'Login with Single Sign On' }).click({ force: true });
await page.waitForTimeout(20000);
// Interact with the Microsoft login page
const microsoftPage = await context.newPage();
await microsoftPage.goto('https://login.microsoftonline.com');
// Enter email
const emailInput = await microsoftPage.waitForSelector('#i0116.form-control.ltr_override.input.ext-input.text-box.ext-text-box', { timeout: 10000 });
await expect(emailInput).toHaveAttribute('placeholder', 'Email address, phone number or Skype');
await emailInput.fill('EMAIL HERE');
await microsoftPage.waitForTimeout(1000);
// Click 'Next'
const nextButton = await microsoftPage.locator('.win-button.button_primary.high-contrast-overrides.button.ext-button.primary.ext-primary', { hasText: 'Next' });
await expect(nextButton).toBeVisible();
await nextButton.click({ force: true });
await microsoftPage.waitForTimeout(5000);
// Enter password
const passwordInput = await microsoftPage.waitForSelector('#i0118.form-control.input.ext-input.text-box.ext-text-box', { timeout: 10000 });
await expect(passwordInput).toBeVisible();
await passwordInput.fill('PASSWORD HERE');
await microsoftPage.waitForTimeout(1000);
// Click 'Sign in'
const signInButton = await microsoftPage.waitForSelector('input#idSIButton9.win-button.button_primary.high-contrast-overrides.button.ext-button.primary.ext-primary');
await expect(signInButton).toBeVisible();
await signInButton.click({ force: true });
await microsoftPage.waitForTimeout(30000);
Этот скрипт по сути открывает первую ссылку, и я сразу замечаю, что у него возникают проблемы с нажатием кнопки «Войти с помощью единого входа». Примерно через 15 секунд в новом окне открывается страница входа в Microsoft, и тест мгновенно завершается неудачей.
В идеале это должно работать так: Шаг 1: Откройте https://backoffice.iqos.com/backoffice/login.zul Шаг 2. Нажмите кнопку «Войти с помощью единого входа». Шаг 3. Должна открыться страница входа в Microsoft. Шаг 4. Вставьте адрес электронной почты и нажмите кнопку «Далее». Шаг 5: Введите пароль и нажмите кнопку «Далее». Шаг 6. Процесс входа в систему Microsoft успешно завершен.
Основная проблема заключается в том, что div.singlesignon_login_cell
содержит <a>Login with Single Sign On</a>
, но, вероятно, не реагирует на click().
Вместо этого вам нужно будет напрямую нажать <a>Login with Single Sign On</a>
.
Это работает для меня (только часть вашего теста):
test.only('single sign on', async ({page}) => {
await page.goto('https://backoffice.iqos.com/backoffice/login.zul',
{waitUntil: 'load', timeout: 30_000 });
const sso = page.getByRole('link', { name: 'Login with Single Sign On' });
await sso.click();
// this is on the new page
await expect(page.getByRole('heading', { name: 'Sign in' })).toBeVisible();
await page.getByPlaceholder('Email, phone, or Skype').click();
await page.getByPlaceholder('Email, phone, or Skype').fill('my-email');
await page.getByPlaceholder('Email, phone, or Skype').press('Enter');
await page.pause()
})
Я использовал функцию codegen, чтобы получить локаторы, что дает вам гораздо лучшие команды драматурга, чем перевод материала Cypress, особенно если вы только осваиваете основы.
В основном управляйте драматургом во главе
npx playwright test --headed
и используйте await page.pause()
в конце кода, чтобы сделать паузу с открытым инспектором драматурга.
Нажмите «Запись» на панели инструментов инспектора, и в главном окне появится панель инструментов с параметрами локатора, видимости, текста и значений.
Выберите, который вы хотите использовать, затем просто выполните действия в главной форме, и код Playwright будет добавлен в инспектор.
Полная документация здесь
Хэмиш.Линклейтер, ты такой профи :) работает отлично!