Вход в Microsoft с помощью драматурга

Я создал сценарий 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 успешно завершен.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Основная проблема заключается в том, что 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 будет добавлен в инспектор.

Полная документация здесь

Хэмиш.Линклейтер, ты такой профи :) работает отлично!

No Tools No Craft 11.08.2024 13:22

Другие вопросы по теме