0

嗨（我是 palywright 的新手），

我需要/想要在剧作家中找到一种方法，通过 pageObjectModel 在使用 keycloak 的应用程序中登录，但我不知道如何。

我找到了一种没有 pageObject 的方法，在第一次测试中登录并将身份验证保存在 process.env.STORAGE 中，然后在 file.spec.js 中的其余测试中使用 test.use({storageState: auth_storage_path})；

注意：keycloak 有效（对不起这个基本信息）

  • 用户未登录 -> visit.baseUrl，将您重定向到 keycloak authPage
  • 用户已经登录 -> visit.baseUrl 直接转到 bareUrl。（所以主页中没有登录按钮等）
//tests_with_auth_store.spec.js

    const {test, expect}    = require('@playwright/test');
    const auth_storage_path = 'storage_auth.json';
    const baseUrl           = 'https://myBaseUrl_xyz.com';


    test('mylogin', async ({page, context}) => {
      const usernameId    = '[id="username"]';
      const passwordId    = '[id="password"]';
      const idLogin       = '[id="login-button"]';
      const usernameValue = '*****';
      const passwordValue = '*****';
    
      //login:
      await page.goto(baseUrl);
      await page.fill(usernameId, usernameValue);
      await page.fill(passwordId, passwordValue);
    
      await Promise.all([
        page.waitForNavigation(/*{ baseUrl: baseUrl }*/),
        page.click(idLogin)
      ]);
      process.env.STORAGE = null;
      const storage = await context.storageState({ path: auth_storage_path });
      process.env.STORAGE = JSON.stringify(storage);
      JSON.parse(process.env.STORAGE);
    
    });
    
    test.describe("testDescription login via pageObjectModel", () => {
    
      test.use({storageState: auth_storage_path});
    
      test('i- firstTest whatever ', async ({page}) => {
        await page.goto(baseUrl);
        ......
        ....
      });

      test('ii- secondTest whatever ', async ({page}) => {
        await page.goto(baseUrl);
        ......
        ....
      });
});

这工作正常，所有测试都在 test.use({storageState: auth_storage_path}); 可以直接跳转到baseUrl。问题是我找不到将 test('login') 封装到剧作家 pageObject 的方法（在 cypress 中，我们在 commands.js 中的简单 func 中完成了它并将身份验证保存到 cookie 中）

我的 login-page.js 演示：

// login-page.js
const { expect, test} = require('@playwright/test');
const baseUrl = 'https://myBaseUrl_xyz.com';
const auth_storage_path = 'storage_auth.json';

exports.LoginPage = class LoginPage {
  
  /**
   * @param {import('@playwright/test').Page} page
   */
  
  constructor(page) {
    this.page = page;
  }
  
   async login() {
     process.env.STORAGE = null;
     const baseUrl = 'https://myBaseUrl_xyz';

     await this.page.goto(baseUrl);
     await this.page.fill('[id="username"]', '*****');
     await this.page.fill('[id="password"]', '*****');

     await Promise.all([
      this.page.waitForNavigation(/*{ baseUrl: baseUrl }*/),
      this.page.click('[id="fc-login-button"]')
    ]);


     const storage = await this.page.context().storageState({path: auth_storage_path});
     process.env.STORAGE = JSON.stringify(storage);
     JSON.parse(process.env.STORAGE);
  }
  

  // async gotoBaseUrl() {
  //   test.use({storageState: auth_storage_path});
  //   return  this.page.goto(baseUrl);
  // }
  
}

从 tests_with_auth_store_viaPage.spec.js 调用登录页面

// tests_with_auth_store_viaPage.spec.js
const {test, expect} = require('@playwright/test');
const { LoginPage } = require('../login/login-page');
const auth_storage_path = 'storage_auth.json';

const baseUrl = 'https://myBaseUrl_xyz.com';

test('login', async ({page}) => {
  const loginPage = new LoginPage(page);
  await loginPage.login();
});

test.describe("testDEscription tests with save login into json", () => {

  test.use({storageState: auth_storage_path});

  test('i- firstTest whatever', async ({page}) => {
    await page.goto(baseUrl);
    ......
    ....
   });

但是这里 test('i-firstTest 不管什么') page.goto(baseUrl) 不会跳转到 baseUrl 而是跳转到 keycloak auth page :(。

Eventhoug test('login') 是登录并创建 storage_auth.json。所以我做错了什么，也许我需要像 loginPage.gotoBaseUrl() 这样的东西，但它也不起作用。

到目前为止，我正在编写其余所有测试，包括始终是第一个测试（'mylogin），但我确信有一种方法可以通过 pageObject

问候

4

2 回答 2

0

demo_login.spec.js

const {test, expect} = require('@playwright/test');

const auth_storage_path = 'storage_auth.json'; 
const {Login} = require('../../yourpathforfile/login_page.js'); 
const {Logout} = require("../../yourpathforfile/logout_page.js");

test('login_a', async ({page}) => {   
const login = new Login(page);   
await login.visit_baseurl();   
await login.method_login();   
await login.check_login_success();   
await login.saveAuth(auth_storage_path);   
await login.print_url_tenant();   
await login.print_browser(); 
});


test.describe("Login_a tests --> ", () => {

  test.use({storageState: auth_storage_path});

  test('demo_a test', async () => {
    expect( 1 +1).toBe(2);   });

  test('logout_a', async ({page}) => {
    const logout = new Logout(page);
    await logout.visit_baseurl();
    await logout.method_check_pageIsWorkplace();
    await logout.method_logout_workplace();
    await logout.method_check_logout();   
  });

});

objectPage-> login_page.js

const { expect, firefox} = require('@playwright/test'); 
const uaParser= require("ua-parser-js");  


exports.Login = class Login {

 /**    
  * @param {import('@playwright/test').Page} page    
  */

  constructor(page) {
    this.page = page;   }

  async visit_baseurl () {
    await this.page.goto("/");
    //await this.page.goto(process.env.env_baseurl );   
 }

  async method_login() {
    const usernameId    = selectorUserId;
    const passwordId    = selectorPassId;
    const idLogin       = '[id="fc-login-button"]';
    const usernameValue = 'demo_user_123';
    const passwordValue = 'demo_pass_123';

    const mydelay = 200;
    await this.page.click(usernameId);
    await this.page.type(usernameId, usernameValue, {delay:mydelay});
    await this.page.click(passwordId);
    await this.page.type(passwordId, passwordValue, {delay:mydelay});
    await this.page.click(idLogin,{delay:mydelay})
  }

etc ....
}

logout_page 也一样 如果您需要更多信息，请告诉 mne。

于 2022-01-31T16:28:37.070 回答
0

已经找到方法了。我找到了自己的路。如果有人需要任何帮助，请随时问我

于 2021-10-19T13:34:26.573 回答