Skip to content
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.

Sign up for GitHub

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

Custom locator playwright #2389

Merged
merged 10 commits into from
May 13, 2020
Merged

Custom locator playwright #2389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
35f6f3b
Makes suggested changes to have Chromium install
Georgegriff May 9, 2020
8d581c1
Merge branch 'master' of github.com:Georgegriff/CodeceptJS
May 12, 2020
2b611d0
Merge branch 'master' of https://github.com/Codeception/CodeceptJS
May 12, 2020
f0c10e3
refactor playwright to fix custom locators with xpath
May 12, 2020
9b4a815
remove test modification
May 12, 2020
562d130
CI kick
May 12, 2020
22d0c73
Apply suggestions from code review
Georgegriff May 12, 2020
d60e3b8
fix flakey unit tests
May 13, 2020
196a623
Merge branch 'custom_locator_playwright' of github.com:Georgegriff/Co…
May 13, 2020
05678b8
ensure dont reset Locators
May 13, 2020
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
55 changes: 20 additions & 35 deletions lib/helper/Playwright.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1675,19 +1675,9 @@ class Playwright extends Helper {
async waitForEnabled(locator, sec) {
const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
locator = new Locator(locator, 'css');
const matcher = await this.context;
let waiter;
const context = await this._getContext();
if (!locator.isXPath()) {
// playwright combined selectors
waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()} >> __disabled=false`, { timeout: waitTimeout });
} else {
const enabledFn = function ([locator, $XPath]) {
eval($XPath); // eslint-disable-line no-eval
return $XPath(null, locator).filter(el => !el.disabled).length > 0;
};
waiter = context.waitForFunction(enabledFn, [locator.value, $XPath.toString()], { timeout: waitTimeout });
}
// playwright combined selectors
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simplified the code path by just using waitForSelector, no need for a special xpath case

const waiter = context.waitForSelector(`${buildLocatorString(locator)} >> __disabled=false`, { timeout: waitTimeout });
return waiter.catch((err) => {
throw new Error(`element (${locator.toString()}) still not enabled after ${waitTimeout / 1000} sec\n${err.message}`);
});
Expand All @@ -1699,19 +1689,9 @@ class Playwright extends Helper {
async waitForValue(field, value, sec) {
const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
const locator = new Locator(field, 'css');
const matcher = await this.context;
let waiter;
const context = await this._getContext();
if (!locator.isXPath()) {
// uses a custom selector engine for finding value properties on elements
waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()} >> __value=${value}`, { timeout: waitTimeout, state: 'visible' });
} else {
const valueFn = function ([locator, $XPath, value]) {
eval($XPath); // eslint-disable-line no-eval
return $XPath(null, locator).filter(el => (el.value || '').indexOf(value) !== -1).length > 0;
};
waiter = context.waitForFunction(valueFn, [locator.value, $XPath.toString(), value], { timeout: waitTimeout });
}
// uses a custom selector engine for finding value properties on elements
const waiter = context.waitForSelector(`${buildLocatorString(locator)} >> __value=${value}`, { timeout: waitTimeout, state: 'visible' });
return waiter.catch((err) => {
const loc = locator.toString();
throw new Error(`element (${loc}) is not in DOM or there is no element(${loc}) with value "${value}" after ${waitTimeout / 1000} sec\n${err.message}`);
Expand Down Expand Up @@ -1753,7 +1733,7 @@ class Playwright extends Helper {
* {{> waitForClickable }}
*/
async waitForClickable(locator, waitTimeout) {
console.log('I.waitForClickable is DEPRECATED: This is no longer needed, Playwright automatically waits for element to be clikable');
console.log('I.waitForClickable is DEPRECATED: This is no longer needed, Playwright automatically waits for element to be clickable');
console.log('Remove usage of this function');
}

Expand All @@ -1766,7 +1746,7 @@ class Playwright extends Helper {
locator = new Locator(locator, 'css');

const context = await this._getContext();
const waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`, { timeout: waitTimeout, state: 'attached' });
const waiter = context.waitForSelector(buildLocatorString(locator), { timeout: waitTimeout, state: 'attached' });
return waiter.catch((err) => {
throw new Error(`element (${locator.toString()}) still not present on page after ${waitTimeout / 1000} sec\n${err.message}`);
});
Expand All @@ -1781,7 +1761,7 @@ class Playwright extends Helper {
const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
locator = new Locator(locator, 'css');
const context = await this._getContext();
const waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`, { timeout: waitTimeout, state: 'visible' });
const waiter = context.waitForSelector(buildLocatorString(locator), { timeout: waitTimeout, state: 'visible' });
return waiter.catch((err) => {
throw new Error(`element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec\n${err.message}`);
});
Expand All @@ -1794,7 +1774,7 @@ class Playwright extends Helper {
const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
locator = new Locator(locator, 'css');
const context = await this._getContext();
const waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`, { timeout: waitTimeout, state: 'hidden' });
const waiter = context.waitForSelector(buildLocatorString(locator), { timeout: waitTimeout, state: 'hidden' });
return waiter.catch((err) => {
throw new Error(`element (${locator.toString()}) still visible after ${waitTimeout / 1000} sec\n${err.message}`);
});
Expand All @@ -1807,7 +1787,7 @@ class Playwright extends Helper {
const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
locator = new Locator(locator, 'css');
const context = await this._getContext();
return context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`, { timeout: waitTimeout, state: 'hidden' }).catch((err) => {
return context.waitForSelector(buildLocatorString(locator), { timeout: waitTimeout, state: 'hidden' }).catch((err) => {
throw new Error(`element (${locator.toString()}) still not hidden after ${waitTimeout / 1000} sec\n${err.message}`);
});
}
Expand Down Expand Up @@ -2061,14 +2041,19 @@ class Playwright extends Helper {

module.exports = Playwright;

async function findElements(matcher, locator) {
locator = new Locator(locator, 'css');
function buildLocatorString(locator) {
if (locator.isCustom()) {
return matcher.$$(`${locator.type}=${locator.value}`);
} if (!locator.isXPath()) {
return matcher.$$(locator.simplify());
return `${locator.type}=${locator.value}`;
} if (locator.isXPath()) {
// dont rely on heuristics of playwright for figuring out xpath
return `xpath=${locator.value}`;
}
return matcher.$$(`xpath=${locator.value}`);
return locator.simplify();
}

async function findElements(matcher, locator) {
locator = new Locator(locator, 'css');
return matcher.$$(buildLocatorString(locator));
}

async function proceedClick(locator, context = null, options = {}) {
Expand Down
56 changes: 56 additions & 0 deletions test/data/app/view/form/custom_locator.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<html>
<head>
<style>
.invisible_button { display: none; }
</style>
</head>

<body>

<div data-test-id="step_1" class="invisible_button">Step One Button</div>
<div data-test-id="step_2" class="invisible_button">Step Two Button</div>
<div data-test-id="step_3" class="invisible_button">Step Three Button</div>
<div data-test-id="step_4" class="invisible_button">Steps Complete!</div>

<script>
/**
* Utility Functions
*/

function _prepareStepButtons() {
['step_1', 'step_2', 'step_3'].forEach( function( id, index ) {
var num = index + 2,
nextIDNum = num.toString();

getByAttribute( id ).addEventListener( 'click', function( event ) {
var nextID = 'step_' + nextIDNum;
removeClass( getByAttribute( nextID ), 'invisible_button' );
});
});
}

function getByAttribute( id ) {
return document.querySelector( `[data-test-id="${id}"]` );
}

function removeClass( el, cls ) {
el.classList.remove( cls );
return el;
}


/**
* Do Stuff
*/

_prepareStepButtons();

setTimeout(function () {
removeClass( getByAttribute('step_1'), 'invisible_button' );
}, 1000);


</script>

</body>
</html>
59 changes: 59 additions & 0 deletions test/helper/webapi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ const formContents = require('../../lib/utils').test.submittedData(dataFile);
const fileExists = require('../../lib/utils').fileExists;
const secret = require('../../lib/secret').secret;

const Locator = require('../../lib/locator');
const customLocators = require('../../lib/plugin/customLocator');

let originalLocators;
let I;
let data;
let siteUrl;
Expand Down Expand Up @@ -1320,4 +1324,59 @@ module.exports.tests = function () {
});
});
});

describe('#customLocators', () => {
beforeEach(() => {
originalLocators = Locator.filters;
Locator.filters = [];
});
afterEach(() => {
// reset custom locators
Locator.filters = originalLocators;
});
it('should support xpath custom locator by default', async () => {
customLocators({
attribute: 'data-test-id',
enabled: true,
});
await I.amOnPage('/form/custom_locator');
await I.dontSee('Step One Button');
await I.dontSeeElement('$step_1');
await I.waitForVisible('$step_1', 2);
await I.seeElement('$step_1');
await I.click('$step_1');
await I.waitForVisible('$step_2', 2);
await I.see('Step Two Button');
});
it('can use css strategy for custom locator', async () => {
customLocators({
attribute: 'data-test-id',
enabled: true,
strategy: 'css',
});
await I.amOnPage('/form/custom_locator');
await I.dontSee('Step One Button');
await I.dontSeeElement('$step_1');
await I.waitForVisible('$step_1', 2);
await I.seeElement('$step_1');
await I.click('$step_1');
await I.waitForVisible('$step_2', 2);
await I.see('Step Two Button');
});
it('can use xpath strategy for custom locator', async () => {
customLocators({
attribute: 'data-test-id',
enabled: true,
strategy: 'xpath',
});
await I.amOnPage('/form/custom_locator');
await I.dontSee('Step One Button');
await I.dontSeeElement('$step_1');
await I.waitForVisible('$step_1', 2);
await I.seeElement('$step_1');
await I.click('$step_1');
await I.waitForVisible('$step_2', 2);
await I.see('Step Two Button');
});
});
};
26 changes: 16 additions & 10 deletions test/runner/allure_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,14 @@ describe('CodeceptJS Allure Plugin', () => {
stdout.should.include('FAIL | 0 passed, 1 failed');

const files = fs.readdirSync(path.join(codecept_dir, 'output/failed'));
const testResultPath = files[0];
assert(testResultPath.match(/\.xml$/), 'not a xml file');
const file = fs.readFileSync(path.join(codecept_dir, 'output/failed', testResultPath), 'utf8');
file.should.include('BeforeSuite of suite failing setup test suite: failed.');
file.should.include('the before suite setup failed');
// join all reports together
const reports = files.map((testResultPath) => {
assert(testResultPath.match(/\.xml$/), 'not a xml file');
return fs.readFileSync(path.join(codecept_dir, 'output/failed', testResultPath), 'utf8');
}).join(' ');
reports.should.include('BeforeSuite of suite failing setup test suite: failed.');
reports.should.include('the before suite setup failed');
reports.should.include('Skipped due to failure in \'before\' hook');
done();
});
});
Expand All @@ -68,11 +71,14 @@ describe('CodeceptJS Allure Plugin', () => {
stdout.should.include('FAIL | 0 passed');

const files = fs.readdirSync(path.join(codecept_dir, 'output/failed'));
const testResultPath = files[0];
assert(testResultPath.match(/\.xml$/), 'not a xml file');
const file = fs.readFileSync(path.join(codecept_dir, 'output/failed', testResultPath), 'utf8');
file.should.include('BeforeSuite of suite failing setup test suite: failed.');
file.should.include('the before suite setup failed');
const reports = files.map((testResultPath) => {
assert(testResultPath.match(/\.xml$/), 'not a xml file');
return fs.readFileSync(path.join(codecept_dir, 'output/failed', testResultPath), 'utf8');
}).join(' ');
reports.should.include('BeforeSuite of suite failing setup test suite: failed.');
reports.should.include('the before suite setup failed');
// the line below does not work in workers needs investigating https://github.com/Codeception/CodeceptJS/issues/2391
// reports.should.include('Skipped due to failure in \'before\' hook');
done();
});
});
Expand Down