是否可以从剧作家的定位器对象中获取选择器？

Question

我在 playwright 中使用页面对象模型开发我的自动化测试。因此，我正在构建一个 class 来保存我的定位器并公开定位器，但不一定是使用的选择器。定位器是否可以共享其选择器？

exports.MyWebPageModel = class MyWebPageModel {
  constructor(page) {
    this.myMultiSelect = page.locator('#select-group select');
    this.submitButton = page.locator('#submit-btn');
  }
}

test('validate multi-select submission', ({page}) -> {
  const myPage = new MyWebPageModel(page);
  const selectChoices = ['choice1', 'choice2', 'choice4'];
  await myPage.myMultiSelect.selectOptions(selectedChoices);
  Promise.all([
    page.waitForNavigation(),
    myPage.submitButton.click()
  ]);

  /* do tests on new page, click it's back button to return to previous page */

  const allSelectedValues = await page.$eval(myPage.myMultiSelect.???, e => Array.from(e.selectedOptions).map(option => option.value));  // get the selected options from select element
  expect(allSelectedValues).toEqual(selectedChoices);  // verify the selected options matches selectChoices.
});

Answer 1

我 95% 确定您无法获得之前使用的选择器。但是，可以通过更改 class 并将选择器设置为 public class 属性来获取选择器。

exports.MyWebPageModel = class MyWebPageModel {

//think it can be declared as const
public let multiSelectSelector:string = '#select-group select';
public let submitButtonSelector:string = '#submit-btn';

  constructor(page) {
    this.myMultiSelect = page.locator(this.multiSelectLocator);
    this.submitButton = page.locator(this.submitButton);
  }
}

Answer 2

这是一种方法，但不确定它是否适用于所有可能的定位器！

// Get a selector from a playwright locator
import { Locator } from "@playwright/test";
export function extractSelector(locator: Locator) {
    const selector = locator.toString();
    const parts = selector.split("@");
    if (parts.length !== 2) { throw Error("extractSelector: susupect that this is not a locator"); }
    if (parts[0] !== "Locator") { throw Error("extractSelector: did not find locator"); }
    return parts[1];
}

Answer 3

通过执行以下操作：

const myLoc = page.locator('#myElement');
Object.getOwnPropertyNames(myLoc).forEach(prop => { 
  console.log(prop + " = " + row_locator[prop]); 
});

我发现有一个 _selector，它 returns 用于定位器对象的内部选择器。

所以答案是使用定位器的“私有”属性 _selector。这是生成定位器错误时使用的值。

所以，给定一个 table:

<table id="colors">
  <thead>
  <trow>
    <th>Key</th>
    <th>Color</th>
  </trow>
  </thead>
  <tbody>
  <trow>
    <td>R</td><td>Red</td>
  </trow>
  <trow>
    <td>B</td><td>Blue</td>
  </trow>
  <trow>
    <td>G</td><td>Green</td>
  </trow>
  </tbody>
</table>

而且，也许您可以按如下方式构建剧作家对象：

exports.ColorTable = class ColorTable {
  constructor(page) {
    this.page = page;
    this.table = this.page.locator("#colors");
    this.tableData = this.table.locator('tbody tr');
  }
}

下面的结果

const myT = new ColorTable(page);
console.log(myT.tableData._selector);

可能看起来像：Locator@#colors >> tbody tr

是否可以从剧作家的定位器对象中获取选择器？

Is it possible to get the selector from a locator object in playwright?

automation

ui-automation

playwright