New Changs
This commit is contained in:
Родитель
bc35d74b04
Коммит
287be451d6
|
@ -1,67 +0,0 @@
|
|||
export const compareDoms = (baselineDom, candidateDom) => {
|
||||
let BTagName = Object.keys(baselineDom)[0];
|
||||
let CTageName = Object.keys(candidateDom)[0];
|
||||
console.log(`BTagName, CTagname: ${BTagName} ${CTageName}`);
|
||||
|
||||
if((baselineDom[BTagName]["uniqueId"] == candidateDom[CTageName]["uniqueId"]) && !candidateDom[CTageName]["found"]){
|
||||
baselineDom[BTagName]["found"] = true;
|
||||
candidateDom[CTageName]["found"] = true;
|
||||
console.log(`found`);
|
||||
const cssComparisonResult = compareNodeCSS(baselineDom[BTagName]["cssProps"], candidateDom[CTageName]["cssProps"]);
|
||||
if(Object.keys(cssComparisonResult).length > 0){
|
||||
console.log(`cssComparisonResult: ${baselineDom[BTagName]["uniqueId"]}, ${candidateDom[BTagName]["uniqueId"]}`)
|
||||
}
|
||||
candidateDom[CTageName]["cssComparisonResult"] = cssComparisonResult;
|
||||
baselineDom[BTagName]["cssComparisonResult"] = cssComparisonResult;
|
||||
|
||||
candidateDom[CTageName]["childNodes"].forEach((CChildNode) => {
|
||||
for(let i=0; i<baselineDom[BTagName]["childNodes"].length; i++){
|
||||
let BChildNode = baselineDom[BTagName]["childNodes"][i];
|
||||
|
||||
if(compareDoms(BChildNode, CChildNode)){
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
const compareNodeCSS = (baseLineCSS, candidateCSS) => {
|
||||
// console.log(`comparing CSS ${baseLineCSS} ${candidateCSS}`);
|
||||
|
||||
const cssComparisonResult = {};
|
||||
|
||||
for(const [key, value] of Object.entries(baseLineCSS)){
|
||||
if(candidateCSS[key] == undefined) {
|
||||
cssComparisonResult[key] = {
|
||||
"candidate": "DE",
|
||||
"baseline": value
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if(candidateCSS[key] !== value){
|
||||
cssComparisonResult[key] = {
|
||||
"candidate": candidateCSS[key],
|
||||
"baseline": baseLineCSS[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for(const [key, value] of Object.entries(candidateCSS)){
|
||||
if(baseLineCSS[key] == undefined) {
|
||||
cssComparisonResult[key] = {
|
||||
"candidate": value,
|
||||
"baseline": "DE"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return cssComparisonResult;
|
||||
}
|
||||
|
||||
export default compareDoms;
|
|
@ -1,15 +1,12 @@
|
|||
import {Page} from "playwright";
|
||||
import * as fs from "fs";
|
||||
import { compress } from "compress-json";
|
||||
/**
|
||||
* parseHTMLAndKeepRelations (Without underscore) contains the logic of parsing DOM.
|
||||
*/
|
||||
|
||||
const parseHTMLAndKeepRelations = (selector: string) => {
|
||||
|
||||
let pageElements: any;
|
||||
let dummy = document.createElement( 'element-' + ( new Date().getTime() ) );
|
||||
document.body.appendChild( dummy );
|
||||
// console.log(`dummmy: ${JSON.stringify(window.getComputedStyle(dummy))}`);
|
||||
document.body.appendChild( dummy );
|
||||
const dummyElementStyleKeys = Object.keys(window.getComputedStyle(dummy));
|
||||
|
||||
if(selector !== ""){
|
||||
|
@ -20,15 +17,12 @@ const parseHTMLAndKeepRelations = (selector: string) => {
|
|||
pageElements = document.querySelectorAll("*");
|
||||
}
|
||||
|
||||
// console.log(`selector, pageElements: ${selector}, ${pageElements}`);
|
||||
let pageParsedDom = {}
|
||||
let totalDomElementParsed = 0;
|
||||
|
||||
for(const element of pageElements){
|
||||
if(!element["visited"]){
|
||||
pageParsedDom = iterateDomElements(element, "", 0, 0, 1);
|
||||
}else{
|
||||
// console.log(`element, visited ${JSON.stringify(element["visited"])}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -39,7 +33,6 @@ const parseHTMLAndKeepRelations = (selector: string) => {
|
|||
}
|
||||
}
|
||||
|
||||
// console.log(`pageParsedDom = ${JSON.stringify(pageParsedDom, null, 2)}`);
|
||||
return [
|
||||
pageParsedDom,
|
||||
totalDomElementParsed
|
||||
|
@ -53,7 +46,6 @@ const parseHTMLAndKeepRelations = (selector: string) => {
|
|||
}
|
||||
|
||||
function iterateDomElements(node, parent, id, parentId, _nthChild) {
|
||||
// console.log(parent + " --> " + node.tagName);
|
||||
++totalDomElementParsed;
|
||||
node["visited"] = true;
|
||||
let name = node["tagName"].toLowerCase();
|
||||
|
@ -77,15 +69,12 @@ const parseHTMLAndKeepRelations = (selector: string) => {
|
|||
};
|
||||
|
||||
setParsedDomKeys(node, domElement, name, id, parentId);
|
||||
// console.log(`domElement ${JSON.stringify(domElement)}`);
|
||||
let nthChild = 0;
|
||||
for(const childNode of node.childNodes){
|
||||
if(childNode.tagName && !childNode["visited"]){
|
||||
// console.log(childNode.tagName);
|
||||
if(childNode.tagName && !childNode["visited"]){
|
||||
if (childNode.tagName.toLowerCase() == "script"){
|
||||
childNode["visited"] = true;
|
||||
}else{
|
||||
// console.log(node["nthChild"]);
|
||||
domElement[name]["childNodes"].push(iterateDomElements(childNode, domElement[name]["path"], id+1, id+1, ++nthChild));
|
||||
}
|
||||
}
|
||||
|
@ -96,8 +85,6 @@ const parseHTMLAndKeepRelations = (selector: string) => {
|
|||
|
||||
function setParsedDomKeys(node, domElement, name, id, parentId){
|
||||
const coordinates = node.getBoundingClientRect();
|
||||
// console.log(coordinates["x"]);
|
||||
// console.log(coordinates["y"]);
|
||||
domElement[name]["attributes"] = findElementAttributes(node);
|
||||
domElement[name]["cssProps"] = findAppliedCSSOnElement(node);
|
||||
domElement[name]["found"] = false;
|
||||
|
@ -114,7 +101,6 @@ const parseHTMLAndKeepRelations = (selector: string) => {
|
|||
let uniqueStr = "";
|
||||
Object.entries(attr).forEach((entry) => {
|
||||
const [key, value] = entry;
|
||||
// console.log(`${key}: ${value}`);
|
||||
uniqueStr += `${key}:${value}*`
|
||||
});
|
||||
return uniqueStr;
|
||||
|
@ -153,19 +139,13 @@ const parseHTMLAndKeepRelations = (selector: string) => {
|
|||
|
||||
export const parseWebPage = async (page: Page, filename: string, selector?: any) => {
|
||||
console.log('In paseWebPages');
|
||||
// const type = filename.toLowerCase().includes("baseline") ? "BASELINE" : "CANDIDATE";
|
||||
|
||||
// console.log(`\n\n******** PARSING DOM ${type} ********`);
|
||||
console.log(`\n\n******** PARSING DOM ********`);
|
||||
const result = await page.evaluate(parseHTMLAndKeepRelations, selector);
|
||||
// console.log(`result: ${JSON.stringify(result, null, 2)}`);
|
||||
// console.log(`\n\nHURRAYYY !!!...COMPLETED PARSING ${type}`);
|
||||
console.log(`filename, selector: ${filename}, ${selector}`);
|
||||
// if (!fs.existsSync("dist\\snapshots")){
|
||||
// fs.mkdirSync("dist\\snapshots");
|
||||
// }
|
||||
// const compressedResult = compress(result[0]);
|
||||
compress;
|
||||
const compressedResult = result[0];
|
||||
const compressedResult = compress(result[0]);
|
||||
// compress;
|
||||
// const compressedResult = result[0];
|
||||
fs.writeFileSync(filename, JSON.stringify(compressedResult), "utf-8");
|
||||
fs.writeFileSync(filename, JSON.stringify(compressedResult), "utf-8");
|
||||
return result[0];
|
||||
|
|
|
@ -275,7 +275,9 @@ export class PlayWrightExecutor {
|
|||
path: screenshotPath,
|
||||
});
|
||||
console.log(`saving snapshot`);
|
||||
await parseWebPage(this.page, screenshotPath.replace(".png", "") + ".txt", "") ;
|
||||
if(this.options.parseDom){
|
||||
await parseWebPage(this.page, screenshotPath.replace(".png", "") + ".txt", "") ;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("ERROR: PAGE_SCREENSHOT: ", err.message);
|
||||
throw err;
|
||||
|
@ -292,7 +294,9 @@ export class PlayWrightExecutor {
|
|||
await element.screenshot({
|
||||
path: screenshotPath,
|
||||
});
|
||||
await parseWebPage(this.page, screenshotPath.replace(".png", "") + ".txt" , selector);
|
||||
if(this.options.parseDom){
|
||||
await parseWebPage(this.page, screenshotPath.replace(".png", "") + ".txt" , selector);
|
||||
}
|
||||
} else {
|
||||
console.log("ERROR: Element NOT VISIBLE: CAPTURING PAGE");
|
||||
await this.makeScreenshot(testName);
|
||||
|
|
|
@ -6,7 +6,7 @@ export interface StoryWrightOptions {
|
|||
screenShotDestPath: string;
|
||||
browsers: Array<string>;
|
||||
report: string,
|
||||
domDiffing: Array<string>;
|
||||
parseDom: boolean;
|
||||
headless: boolean;
|
||||
concurrency: number;
|
||||
skipSteps: boolean;
|
||||
|
|
|
@ -169,38 +169,4 @@ export class StoryWrightProcessor {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
public static async runDomDiffing(options: StoryWrightOptions) {
|
||||
// console.log(`Starting DOM diffing: ${JSON.stringify(options.domDiffing)} ${JSON.stringify(options.report)}`);
|
||||
console.log(`Starting DOM diffing:`);
|
||||
const paths: string[] = options.domDiffing;
|
||||
let baseLineDOMPath: string = paths[0];
|
||||
let candidateDOMPath: string = paths[1];
|
||||
const screenshotsChanged: any[] = JSON.parse(fs.readFileSync(options.report, "utf-8"))["screenshotsChanged"];
|
||||
|
||||
console.log(`baseLineDOMPath, candidateDOMPath, report: ${baseLineDOMPath}, ${candidateDOMPath} ${JSON.stringify(screenshotsChanged)}`);
|
||||
|
||||
screenshotsChanged.forEach((screenshot: any) => {
|
||||
const domCSSFile = screenshot["imageName"].replace(".png", ".json");
|
||||
|
||||
console.log(`domCSSFilename: ${domCSSFile}`);
|
||||
|
||||
const baseLineDOMCSSsnap = baseLineDOMPath + "//" + domCSSFile;
|
||||
const candidateDOMCSSsnap = candidateDOMPath + "//" + domCSSFile;
|
||||
|
||||
console.log(`baseLineDOMCSSsnap, candidateDOMCSSsnap: ${baseLineDOMCSSsnap}, ${candidateDOMCSSsnap}`);
|
||||
// console.log(compareDoms);
|
||||
|
||||
let baselineDom = JSON.parse(fs.readFileSync(baseLineDOMCSSsnap, "utf-8"));
|
||||
let candidateDom = JSON.parse(fs.readFileSync(candidateDOMCSSsnap, "utf-8"));
|
||||
|
||||
console.log(`baselineDom, candidateDom: ${baselineDom["html"]["uniqueId"]}`);
|
||||
console.log(`baselineDom, candidateDom: ${candidateDom["html"]["uniqueId"]}`);
|
||||
|
||||
// compareDoms(baselineDom, candidateDom);
|
||||
|
||||
fs.writeFileSync(`C:/Users/vinodsharma/Documents/workspace/1JS/ooui/packages/visual-regression-tests/dist/result/${domCSSFile.replace("json", "")}_baseline.json`, JSON.stringify(baselineDom, null, 2));
|
||||
fs.writeFileSync(`C:/Users/vinodsharma/Documents/workspace/1JS/ooui/packages/visual-regression-tests/dist/result/${domCSSFile.replace("json", "")}_candidate.json`, JSON.stringify(candidateDom, null, 2));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
22
src/main.ts
22
src/main.ts
|
@ -36,16 +36,13 @@ const args = argv
|
|||
},
|
||||
choices: [BrowserName.Chromium, BrowserName.Firefox, BrowserName.Webkit],
|
||||
})
|
||||
.option("domDiffing", {
|
||||
alias: "domDiffing",
|
||||
default: ["baselinePath"],
|
||||
.option("paseDom", {
|
||||
alias: "parseDom",
|
||||
default: false,
|
||||
describe:
|
||||
"Run Dom Diffing tool against changed screenshots",
|
||||
"Parse DOM/CSS information of page and store it in a file.",
|
||||
nargs: 1,
|
||||
type: "array",
|
||||
coerce: (array) => {
|
||||
return array.flatMap((v) => v.split(","));
|
||||
},
|
||||
type: "boolean"
|
||||
})
|
||||
.option("report", {
|
||||
alias: "report",
|
||||
|
@ -129,7 +126,7 @@ const storyWrightOptions: StoryWrightOptions = {
|
|||
url: url,
|
||||
screenShotDestPath: args.destpath,
|
||||
browsers: args.browsers,
|
||||
domDiffing: args.domDiffing,
|
||||
parseDom: args.parseDom,
|
||||
report: args.report,
|
||||
headless: args.headless,
|
||||
concurrency: args.concurrency,
|
||||
|
@ -138,9 +135,4 @@ const storyWrightOptions: StoryWrightOptions = {
|
|||
totalPartitions: args.totalPartitions,
|
||||
waitTimeScreenshot: args.waitTimeScreenshot
|
||||
};
|
||||
// StoryWrightProcessor.process(storyWrightOptions);
|
||||
if(storyWrightOptions["domDiffing"].length >= 2){
|
||||
StoryWrightProcessor.runDomDiffing(storyWrightOptions);
|
||||
}else{
|
||||
StoryWrightProcessor.process(storyWrightOptions);
|
||||
}
|
||||
StoryWrightProcessor.process(storyWrightOptions);
|
Загрузка…
Ссылка в новой задаче