Skip to content

feat: other locators from playwright #4090

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 30, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/react.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,4 +66,5 @@ To find React element names and props in a tree use [React DevTools](https://chr

> Turn off minification for application builds otherwise component names will be uglified as well

React locators work via [resq](https://github.com/baruchvlz/resq) library, which handles React 16 and above.
- With WebDriver and Puppeteer, React locators work via [resq](https://github.com/baruchvlz/resq) library, which handles React 16 and above.
- With Playwright, React locators work via [Playwright React Locator](https://playwright.dev/docs/other-locators#react-locator).
22 changes: 22 additions & 0 deletions docs/vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,28 @@ tests

If you agreed to create a demo component, you will also see `TestMe` component in `src/components` folder.

## Locators

For Vue apps a special `vue` locator is available. It allows to select an element by its component name, and props.

```js
{ vue: 'MyComponent' }
{ vue: 'Button', props: { title: 'Click Me' }}
```

With Playwright, you can use Vue locators in any method where locator is required:

```js
I.click({ vue: 'Tab', props: { title: 'Click Me!' }});
I.seeElement({ vue: 't', props: { title: 'Clicked' }});
```

To find Vue element names and props in a tree use [Vue DevTools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) extension.

> Turn off minification for application builds otherwise component names will be uglified as well

Vue locators work via [Playwright Vue Locator](https://playwright.dev/docs/other-locators#vue-locator).

## How to write tests?

* Open `tests/e2e/app_js` and see the demo test
Expand Down
4 changes: 3 additions & 1 deletion lib/helper/Playwright.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const ElementNotFound = require('./errors/ElementNotFound');
const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnectionRefused');
const Popup = require('./extras/Popup');
const Console = require('./extras/Console');
const findReact = require('./extras/React');
const { findReact, findVue } = require('./extras/PlaywrightReactVueLocator');

let playwright;
let perfTiming;
Expand Down Expand Up @@ -3444,6 +3444,7 @@ function buildLocatorString(locator) {

async function findElements(matcher, locator) {
if (locator.react) return findReact(matcher, locator);
if (locator.vue) return findVue(matcher, locator);
locator = new Locator(locator, 'css');

return matcher.locator(buildLocatorString(locator)).all();
Expand Down Expand Up @@ -3505,6 +3506,7 @@ async function proceedClick(locator, context = null, options = {}) {

async function findClickable(matcher, locator) {
if (locator.react) return findReact(matcher, locator);
if (locator.vue) return findVue(matcher, locator);

locator = new Locator(locator);
if (!locator.isFuzzy()) return findElements.call(this, matcher, locator);
Expand Down
9 changes: 0 additions & 9 deletions lib/helper/extras/PlaywrightReact.js

This file was deleted.

38 changes: 38 additions & 0 deletions lib/helper/extras/PlaywrightReactVueLocator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
async function findReact(matcher, locator) {
let _locator = `_react=${locator.react}`;
let props = '';

if (locator.props) {
props += propBuilder(locator.props);
_locator += props;
}
return matcher.locator(_locator).all();
}

async function findVue(matcher, locator) {
let _locator = `_vue=${locator.vue}`;
let props = '';

if (locator.props) {
props += propBuilder(locator.props);
_locator += props;
}
return matcher.locator(_locator).all();
}

function propBuilder(props) {
let _props = '';

for (const [key, value] of Object.entries(props)) {
if (typeof value === 'object') {
for (const [k, v] of Object.entries(value)) {
_props += `[${key}.${k} = "${v}"]`;
}
} else {
_props += `[${key} = "${value}"]`;
}
}
return _props;
}

module.exports = { findReact, findVue };
2 changes: 1 addition & 1 deletion typings/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -431,7 +431,7 @@ declare namespace CodeceptJS {
| string
| ILocator
| Locator
| CustomLocators[keyof CustomLocators];
| CustomLocators;

type StringOrSecret = string | CodeceptJS.Secret;

Expand Down