From 287be451d66e932b26406e19f80a23e3c7b427bc Mon Sep 17 00:00:00 2001 From: Vinod Kumar Sharma Date: Thu, 3 Nov 2022 12:59:11 +0530 Subject: [PATCH] New Changs --- src/DOMDiffing/domDiffingEngine.ts.bak | 67 ------------------- src/DOMDiffing/parseDomPlaywright.ts | 34 ++-------- .../PlayWrightExecutor.ts | 8 ++- .../StoryWrightOptions.ts | 2 +- .../StoryWrightProcessor.ts | 34 ---------- src/main.ts | 22 ++---- 6 files changed, 21 insertions(+), 146 deletions(-) delete mode 100644 src/DOMDiffing/domDiffingEngine.ts.bak diff --git a/src/DOMDiffing/domDiffingEngine.ts.bak b/src/DOMDiffing/domDiffingEngine.ts.bak deleted file mode 100644 index 72a09b2..0000000 --- a/src/DOMDiffing/domDiffingEngine.ts.bak +++ /dev/null @@ -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 { - // 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; \ No newline at end of file diff --git a/src/DOMDiffing/parseDomPlaywright.ts b/src/DOMDiffing/parseDomPlaywright.ts index 8c12be8..39c9acb 100644 --- a/src/DOMDiffing/parseDomPlaywright.ts +++ b/src/DOMDiffing/parseDomPlaywright.ts @@ -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]; diff --git a/src/StoryWrightProcessor/PlayWrightExecutor.ts b/src/StoryWrightProcessor/PlayWrightExecutor.ts index 1b98b1f..47d9ce7 100644 --- a/src/StoryWrightProcessor/PlayWrightExecutor.ts +++ b/src/StoryWrightProcessor/PlayWrightExecutor.ts @@ -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); diff --git a/src/StoryWrightProcessor/StoryWrightOptions.ts b/src/StoryWrightProcessor/StoryWrightOptions.ts index 2dbc103..dfabeb8 100644 --- a/src/StoryWrightProcessor/StoryWrightOptions.ts +++ b/src/StoryWrightProcessor/StoryWrightOptions.ts @@ -6,7 +6,7 @@ export interface StoryWrightOptions { screenShotDestPath: string; browsers: Array; report: string, - domDiffing: Array; + parseDom: boolean; headless: boolean; concurrency: number; skipSteps: boolean; diff --git a/src/StoryWrightProcessor/StoryWrightProcessor.ts b/src/StoryWrightProcessor/StoryWrightProcessor.ts index 1656e4c..9c295e2 100644 --- a/src/StoryWrightProcessor/StoryWrightProcessor.ts +++ b/src/StoryWrightProcessor/StoryWrightProcessor.ts @@ -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)); - }); - } } diff --git a/src/main.ts b/src/main.ts index 1615fce..c32512b 100644 --- a/src/main.ts +++ b/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); \ No newline at end of file