前端頁面的樣式測試方法及裝置制造方法
【專利摘要】本發(fā)明提供一種前端頁面的樣式測試方法及裝置，其中，所述方法包括：遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間；將每個節(jié)點的實際坐標(biāo)區(qū)間與其相鄰的兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷其坐標(biāo)區(qū)間是否有交疊；將坐標(biāo)區(qū)間有交疊的兩節(jié)點的至少其中之一作為具有樣式缺陷的節(jié)點。與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果是：可動態(tài)識別前端頁面是否存在樣式錯誤，不僅大大降低了測試人員的工作量，而且顯著提高了效率和準確度。
【專利說明】前端頁面的樣式測試方法及裝置

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及一種前端頁面的樣式測試方法及裝置，尤其涉及一種針對前端頁面中元素位置重疊的測試方法及裝置。

【背景技術(shù)】
[0002]在產(chǎn)品線的測試過程中，前端頁面的樣式測試工作是很重要的一部分。前端頁面的樣式可能存在著元素錯位、文字折行、圖文混疊等一系列問題，這些問題一直以來影響著頁面的展示效果，帶來很大的質(zhì)量問題。
[0003]一直以來，前端頁面的樣式測試花費了測試人員大量精力，目前，測試人員只能打開若干瀏覽器，用肉眼查看頁面效果是否符合預(yù)期，這不僅效率很低，而且不準確，稍有不慎就會遺漏掉可能的bug。另外，當(dāng)進行回歸測試時，測試人員仍然需要通過若干瀏覽器打開所有頁面，重復(fù)相同的點擊操作，用肉眼確認頁面效果，費時費力。


【發(fā)明內(nèi)容】

[0004]本發(fā)明的目的之一在于提供一種前端頁面的樣式測試方法及裝置。
[0005]為實現(xiàn)上述發(fā)明目的之一，本發(fā)明一實施方式提供了一種前端頁面的樣式測試方法，其包括:
[0006]遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間；
[0007]將每個節(jié)點的實際坐標(biāo)區(qū)間與其相鄰的兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷其坐標(biāo)區(qū)間是否有交疊；
[0008]將坐標(biāo)區(qū)間有交疊的兩節(jié)點的至少其中之一作為具有樣式缺陷的節(jié)點。
[0009]作為本發(fā)明一實施方式的進一步改進，所述“遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間”步驟具體包括:
[0010]首先，計算父節(jié)點下的子葉節(jié)點和所述子葉節(jié)點的兄弟節(jié)點的實際坐標(biāo)區(qū)間；
[0011]其次，計算所述父節(jié)點的實際坐標(biāo)區(qū)間。
[0012]作為本發(fā)明一實施方式的進一步改進，所述實際坐標(biāo)區(qū)間為:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。
[0013]作為本發(fā)明一實施方式的進一步改進，所述“將每個節(jié)點的實際坐標(biāo)區(qū)間與其相鄰的兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷其坐標(biāo)區(qū)間是否有交疊”步驟具體包括:
[0014]判斷當(dāng)前節(jié)點與下一節(jié)點是否為父子關(guān)系，若是，則結(jié)束當(dāng)前節(jié)點的比對；若否，則繼續(xù)比對；
[0015]判斷當(dāng)前節(jié)點與下一節(jié)點是否為包含關(guān)系，若是，則結(jié)束當(dāng)前節(jié)點的比對，若否，則根據(jù)當(dāng)前節(jié)點的實際坐標(biāo)區(qū)間與下一節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷坐標(biāo)區(qū)間是否存在交疊。
[0016]為實現(xiàn)上述發(fā)明目的之一，本發(fā)明一實施方式提供了一種前端頁面的樣式測試方法，其包括:
[0017]遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間；
[0018]當(dāng)一節(jié)點的實際坐標(biāo)區(qū)間與該節(jié)點的當(dāng)前坐標(biāo)區(qū)間不相同時，將該節(jié)點作為具有樣式缺陷的節(jié)點。
[0019]作為本發(fā)明一實施方式的進一步改進，所述“遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間”步驟具體包括:
[0020]首先，計算父節(jié)點下的子葉節(jié)點和所述子葉節(jié)點的兄弟節(jié)點的實際坐標(biāo)區(qū)間；
[0021]其次，計算所述父節(jié)點的實際坐標(biāo)區(qū)間。
[0022]作為本發(fā)明一實施方式的進一步改進，所述實際坐標(biāo)區(qū)間為:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。
[0023]為實現(xiàn)上述發(fā)明目的之一，本發(fā)明一實施方式提供了一種前端頁面的樣式測試裝置，其包括:
[0024]查詢計算模塊，用于遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間；
[0025]比對模塊，用于將每個節(jié)點的實際坐標(biāo)區(qū)間與其相鄰的兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷其坐標(biāo)區(qū)間是否有交疊；
[0026]輸出模塊，用于將坐標(biāo)區(qū)間有交疊的兩節(jié)點的至少其中之一作為具有樣式缺陷的節(jié)點。
[0027]作為本發(fā)明一實施方式的進一步改進，所述實際坐標(biāo)區(qū)間為:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。
[0028]作為本發(fā)明一實施方式的進一步改進，所述比對模塊用于:
[0029]判斷當(dāng)前節(jié)點與兄弟節(jié)點是否為父子關(guān)系，若是，則結(jié)束當(dāng)前節(jié)點的比對；若否，則繼續(xù)比對；
[0030]判斷當(dāng)前節(jié)點與兄弟節(jié)點是否為包含關(guān)系，若是，則結(jié)束當(dāng)前節(jié)點的比對，若否，則根據(jù)當(dāng)前節(jié)點的實際坐標(biāo)區(qū)間與其兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷坐標(biāo)區(qū)間是否存在交疊。
[0031]為實現(xiàn)上述發(fā)明目的之一，本發(fā)明一實施方式提供了一種前端頁面的樣式測試裝置，其包括:
[0032]查詢計算模塊，用于遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間；
[0033]比對模塊，用于將每個節(jié)點的實際坐標(biāo)區(qū)間與該節(jié)點的當(dāng)前坐標(biāo)區(qū)間相比對；
[0034]輸出模塊，當(dāng)節(jié)點的實際坐標(biāo)區(qū)間和當(dāng)前坐標(biāo)區(qū)間不相同時，將該節(jié)點作為具有樣式缺陷的節(jié)點。
[0035]作為本發(fā)明一實施方式的進一步改進，所述實際坐標(biāo)區(qū)間為:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。
[0036]與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果是:可動態(tài)識別前端頁面是否存在樣式錯誤，不僅大大降低了測試人員的工作量，而且顯著提高了效率和準確度。

【專利附圖】

【附圖說明】
[0037]圖1A?IC是本發(fā)明一實施方式中前端頁面樣式缺陷的實例圖。
[0038]圖2是本發(fā)明一實施方式的前端頁面的樣式測試方法的流程圖；
[0039]圖3是本發(fā)明一實施方式中判斷坐標(biāo)區(qū)間是否交疊的流程圖；
[0040]圖4是本發(fā)明另一實施方式的前端頁面的樣式檢測方式的流程圖；
[0041]圖5A?5H是本發(fā)明一實施方式中前端頁面的元素交疊示意圖；
[0042]圖6是本發(fā)明一實施方式的前端頁面的樣式測試裝置的模塊圖。

【具體實施方式】
[0043]以下將結(jié)合附圖所示的各實施方式對本發(fā)明進行詳細描述。但這些實施方式并不限制本發(fā)明，本領(lǐng)域的普通技術(shù)人員根據(jù)這些實施方式所輕易做出的結(jié)構(gòu)、方法、或功能上的變換均包含在本發(fā)明的保護范圍內(nèi)。
[0044]如圖1A所示，在該前端頁面的上方一欄，所有元素屬于同一個div元素，其元素對應(yīng)的子節(jié)點“詳情頁-請點擊這里”的鏈接和右側(cè)的圖標(biāo)屬于兄弟節(jié)點，他們本該各自占有一定的空間長寬。然而，由于“詳情頁-請點擊這里”占據(jù)的空間與右側(cè)的五角星圖標(biāo)占據(jù)的空間存在交疊區(qū)域，從而導(dǎo)致了前端頁面中出現(xiàn)五角星擋住文字“這里”的情況。
[0045]如圖1B所示，圖中的高亮區(qū)域顯示了“詳情頁-請點擊這里”鏈接實際占有的空間長寬，如圖1C所示，圖中的高亮區(qū)域顯示了五角星圖標(biāo)、發(fā)送短信圖標(biāo)所占有的空間長寬。不難看出，“詳情頁-請點擊這里”鏈接的右側(cè)區(qū)域與五角星圖標(biāo)所在的左側(cè)區(qū)域在水平方向和垂直方向都存在交疊，從而導(dǎo)致五角星圖標(biāo)擋住了“詳情頁-請點擊這里”鏈接的正常顯示，出現(xiàn)了圖文混疊的錯誤。
[0046]如圖2所示，本發(fā)明一實施方式提供了一種前端頁面的樣式測試方法，其包括:
[0047]遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間；
[0048]前端頁面可以理解為一個dom樹，頁面中的每一個元素都是dom樹的一個節(jié)點。前端頁面的內(nèi)容和樣式則是通過在頁面的不同位置上擺放或填充不同的元素實現(xiàn)的，不同的擺放方式形成了不同的dom樹，也就構(gòu)成了不同內(nèi)容和樣式的前端頁面。在本發(fā)明一實施方式中，遍歷并計算節(jié)點的實際坐標(biāo)區(qū)間是從底層向上層進行的:
[0049]先計算父節(jié)點下的子葉節(jié)點和所述子葉節(jié)點的兄弟節(jié)點的實際坐標(biāo)區(qū)間；再計算所述父節(jié)點的實際坐標(biāo)區(qū)間。例如，先遍歷并計算父節(jié)點N下的子葉節(jié)點N，然后，判斷該子葉節(jié)點N是否存在兄弟節(jié)點,若該子葉節(jié)點N存在兄弟節(jié)點-子葉節(jié)點N’，則計算該子葉節(jié)點N’的實際坐標(biāo)區(qū)間，直至將所述父節(jié)點N下的所有子葉節(jié)點計算完成，再計算父節(jié)點N的實際坐標(biāo)區(qū)間；然后，判斷父節(jié)點N是否存在兄弟節(jié)點-父節(jié)點M，若存在，則計算父節(jié)點M下的子葉節(jié)點......如此反復(fù)，直至完成dom樹下所有節(jié)點的計算。
[0050]以圖1A為例，通過遍歷前端頁面對應(yīng)的dom樹，可查詢到包括與“詳情頁-請點擊這里”這個元素對應(yīng)的節(jié)點，并且獲得該節(jié)點的屬性，例如，該節(jié)點在水平方向上占用的空間長寬為150px，其在水平方向上的當(dāng)前坐標(biāo)區(qū)間為(200，300)，其中，其起點坐標(biāo)為(200，0)，經(jīng)過計算，可以得知，該節(jié)點的實際坐標(biāo)區(qū)間應(yīng)為(200，(200+150))=(200，350)。
[0051]將每個節(jié)點的實際坐標(biāo)區(qū)間與其兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷其坐標(biāo)區(qū)間是否有交疊；其中，當(dāng)前坐標(biāo)區(qū)間是指該坐標(biāo)目前dom樹下所定義的坐標(biāo)區(qū)間。
[0052]以圖1A為例，五角星圖標(biāo)當(dāng)前坐標(biāo)區(qū)間為(300，310)。明顯地，該五角星圖標(biāo)的當(dāng)前坐標(biāo)區(qū)間和文本“詳情頁-請點擊這里”的實際坐標(biāo)區(qū)間存在交疊，可判斷該交疊會導(dǎo)致前端頁面的元素存在樣式混疊的情況。當(dāng)前，也可以通過“詳情頁-請點擊這里”的實際坐標(biāo)區(qū)間與五角星圖標(biāo)的實際坐標(biāo)區(qū)間比對，例如通過上述步驟計算出的五角星圖標(biāo)的實際坐標(biāo)區(qū)間為(300，320)，那么，該五角星圖標(biāo)的當(dāng)前坐標(biāo)區(qū)間和文本“詳情頁-請點擊這里”的實際坐標(biāo)區(qū)間存在交疊。
[0053]其中，在本發(fā)明一實施方式中，如圖3所示，上述比對和判斷過程具體包括:
[0054]判斷當(dāng)前節(jié)點與下一節(jié)點是否為父子關(guān)系，若是，則不進行比對，取另一節(jié)點作為當(dāng)前節(jié)點再行判斷，若否，則按照上述方式比對當(dāng)前節(jié)點的實際坐標(biāo)區(qū)間和下一節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間是否交疊；
[0055]判斷當(dāng)前節(jié)點與下一節(jié)點是否為包含關(guān)系，若是，則不進行比對，取另一節(jié)點作為當(dāng)前節(jié)點再行判斷，若否，則根據(jù)當(dāng)前節(jié)點的實際坐標(biāo)區(qū)間與下一節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷坐標(biāo)區(qū)間是否存在交疊。
[0056]將坐標(biāo)區(qū)間有交疊的兩節(jié)點的至少其中之一作為具有樣式缺陷的節(jié)點。進一步地，在本發(fā)明一實施方式中，可自動針對具有樣式缺陷的區(qū)域進行標(biāo)記和截圖，并輸出測試結(jié)果。
[0057]需要注意的是，在上述以圖1A至圖1C的例子中，為了方便表述和理解，只取了一個維度的坐標(biāo)，即水平坐標(biāo)X，然而，實際上所述實際坐標(biāo)區(qū)間包括:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。在任何一個維度上出現(xiàn)交疊都會導(dǎo)致前端頁面的元素樣式混疊。
[0058]如圖4所示，本發(fā)明另一實施方式提供了一種前端頁面的樣式測試方法，其包括:
[0059]遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點的起始坐標(biāo)和節(jié)點的實際面積計算每個節(jié)點的實際坐標(biāo)區(qū)間；
[0060]前端頁面可以理解為一個dom樹，頁面中的每一個元素都是dom樹的一個節(jié)點。前端頁面的內(nèi)容和樣式則是通過在頁面的不同位置上擺放或填充不同的元素實現(xiàn)的，不同的擺放方式形成了不同的dom樹，也就構(gòu)成了不同內(nèi)容和樣式的前端頁面。在本發(fā)明一實施方式中，遍歷并計算節(jié)點的實際坐標(biāo)區(qū)間是從底層向上層進行的:
[0061]先計算父節(jié)點下的子葉節(jié)點和所述子葉節(jié)點的兄弟節(jié)點的實際坐標(biāo)區(qū)間；再計算所述父節(jié)點的實際坐標(biāo)區(qū)間。例如，先遍歷并計算父節(jié)點N下的子葉節(jié)點N，然后，判斷該子葉節(jié)點N是否存在兄弟節(jié)點,若該子葉節(jié)點N存在兄弟節(jié)點-子葉節(jié)點N’,則計算該子葉節(jié)點N’的實際坐標(biāo)區(qū)間，直至將所述父節(jié)點N下的所有子葉節(jié)點計算完成，再計算父節(jié)點N的實際坐標(biāo)區(qū)間；然后，判斷父節(jié)點N是否存在兄弟節(jié)點-父節(jié)點M，若存在，則計算父節(jié)點M下的子葉節(jié)點......如此反復(fù)，直至完成dom樹下所有節(jié)點的計算。
[0062]當(dāng)一節(jié)點的實際坐標(biāo)區(qū)間與該節(jié)點的當(dāng)前坐標(biāo)區(qū)間不相同時，將該節(jié)點作為具有樣式缺陷的節(jié)點，其中，當(dāng)前坐標(biāo)區(qū)間是指該坐標(biāo)目前dom樹下所定義的坐標(biāo)區(qū)間。
[0063]以圖1A為例，通過遍歷前端頁面對應(yīng)的dom樹，可查詢到包括與“詳情頁-請點擊這里”這個元素對應(yīng)的節(jié)點，并且獲得該節(jié)點的屬性，例如，該節(jié)點在水平方向上占用的空間長寬為150px，其在水平方向上的當(dāng)前坐標(biāo)區(qū)間為(200，300)，其中，其起點坐標(biāo)為(200，0)，經(jīng)過計算，可以得知，該節(jié)點的實際坐標(biāo)區(qū)間應(yīng)為(200，(200+150))=(200, 350)。如此，該節(jié)點的實際坐標(biāo)區(qū)間與該節(jié)點的當(dāng)前坐標(biāo)區(qū)間是同，顯然，其在前端頁面所表示的元素和預(yù)設(shè)的排版不一致，是具有樣式缺陷的。進一步地，也可僅當(dāng)節(jié)點的實際坐標(biāo)區(qū)間大于該節(jié)點的當(dāng)前坐標(biāo)區(qū)間時，將該節(jié)點作為具有樣式缺陷的節(jié)點。
[0064]在本發(fā)明一實施方式中，可自動針對具有樣式缺陷的區(qū)域進行標(biāo)記和截圖，并輸出測試結(jié)果。
[0065]需要注意的是，在上述以圖1A至圖1C的例子中，為了方便表述和理解，只取了一個維度的坐標(biāo)，即水平坐標(biāo)X，然而，實際上所述實際坐標(biāo)區(qū)間包括:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。在任何一個維度上出現(xiàn)實際坐標(biāo)區(qū)間與當(dāng)前坐標(biāo)區(qū)間不一致，都會導(dǎo)致前端頁面的元素具有樣式缺陷。
[0066]如圖5A?5H所示，在本發(fā)明一實施方式中，前端頁面的元素交疊方式大致包括以下幾種，其中，公式中的大于、小于均是通過相應(yīng)坐標(biāo)的數(shù)值大小判斷的，在前端頁面中，以左上角作為零點，向右及向下豎直增大:
[0067]如5A所示，A元素的右下和B元素的左上相交疊。從節(jié)點的坐標(biāo)區(qū)域反映，A元素的左邊沿坐標(biāo)〈B元素的左邊沿坐標(biāo)；A元素的左邊沿坐標(biāo)+A元素在水平方向上占用的寬度>B元素的左邊沿坐標(biāo)；A元素的上邊沿坐標(biāo)〈B元素的上邊沿坐標(biāo)；A元素的上邊沿坐標(biāo)+A元素在垂直方向上占用的高度>B元素的上邊沿坐標(biāo)，A元素的下邊沿坐標(biāo)〈B元素的下邊沿坐標(biāo)。
[0068]如5B所示，A元素的右上和B元素的左下相交疊。從節(jié)點的坐標(biāo)區(qū)域反映，A元素的左邊沿坐標(biāo)〈B元素的左邊沿坐標(biāo)；A元素的左邊沿坐標(biāo)+A元素在水平方向上占用的寬度>B元素的左邊沿坐標(biāo)；A元素的上邊沿坐標(biāo)>B元素的上邊沿坐標(biāo)；B元素的上邊沿坐標(biāo)+B元素在垂直方向上占用的高度>A元素的上邊沿坐標(biāo)，A元素的下邊沿坐標(biāo)>B元素的下邊沿坐標(biāo)。
[0069]如圖5C所示，A元素的右側(cè)和B元素的左側(cè)相交疊。從節(jié)點的坐標(biāo)區(qū)域反映，A元素的左邊沿坐標(biāo)〈B元素的左邊沿坐標(biāo)；A元素的左邊沿坐標(biāo)+A元素在水平方向上占用的寬度>B元素的左邊沿坐標(biāo)；A元素的上邊沿坐標(biāo)〈B元素的上邊沿坐標(biāo)；A元素的上邊沿坐標(biāo)+A元素在垂直方向上占用的高度>B元素的上邊沿坐標(biāo)，A元素的下邊沿坐標(biāo)>B元素的下邊沿坐標(biāo)。
[0070]如圖所示，A元素的右側(cè)和B元素的左側(cè)相交疊。從節(jié)點的坐標(biāo)區(qū)域反映，A元素的左邊沿坐標(biāo)〈B元素的左邊沿坐標(biāo)；A元素的左邊沿坐標(biāo)+A元素在水平方向上占用的寬度>B元素的左邊沿坐標(biāo)；A元素的上邊沿坐標(biāo)>B元素的上邊沿坐標(biāo)；A元素的上邊沿坐標(biāo)+A元素在垂直方向上占用的高度>B元素的上邊沿坐標(biāo)，A元素的下邊沿坐標(biāo)〈B元素的下邊沿坐標(biāo)。
[0071]如圖5E所示，A元素的上側(cè)和B元素的下側(cè)相交疊。從節(jié)點的坐標(biāo)區(qū)域反映，A元素的上邊沿坐標(biāo)>B元素的上邊沿坐標(biāo)；B元素的上邊沿坐標(biāo)+B元素在垂直方向上占用的高度>A元素的上邊沿坐標(biāo)；A元素的左邊沿坐標(biāo)>B元素的左邊沿坐標(biāo)；B元素的左邊沿坐標(biāo)+B元素在水平方向上占用的寬度>A元素的左邊沿坐標(biāo)，A元素的下邊沿坐標(biāo)>B元素的下邊沿坐標(biāo)；A元素的右邊沿坐標(biāo)〈B元素的右邊沿坐標(biāo)。
[0072]如圖5F所示，A元素的下側(cè)和B元素的上側(cè)相交疊。從節(jié)點的坐標(biāo)區(qū)域反映，A元素的上邊沿坐標(biāo)〈B元素的上邊沿坐標(biāo)；A元素的上邊沿坐標(biāo)+A元素在垂直方向上占用的高度>B元素的上邊沿坐標(biāo)；A元素的左邊沿坐標(biāo)>B元素的左邊沿坐標(biāo)；B元素的左邊沿坐標(biāo)+B元素在水平方向上占用的寬度>A元素的左邊沿坐標(biāo)，A元素的下邊沿坐標(biāo)〈B元素的下邊沿坐標(biāo)；A元素的右邊沿坐標(biāo)〈B元素的右邊沿坐標(biāo)。
[0073]如圖5G所示，A元素的下側(cè)和B元素的上側(cè)相交疊。從節(jié)點的坐標(biāo)區(qū)域反映，A元素的上邊沿坐標(biāo)〈B元素的上邊沿坐標(biāo)；A元素的上邊沿坐標(biāo)+A元素在垂直方向上占用的高度>B元素的上邊沿坐標(biāo)；A元素的左邊沿坐標(biāo)〈B元素的左邊沿坐標(biāo)；A元素的左邊沿坐標(biāo)+A元素在水平方向上占用的寬度>B元素的左邊沿坐標(biāo)，A元素的下邊沿坐標(biāo)〈B元素的下邊沿坐標(biāo)；A元素的右邊沿坐標(biāo)>B元素的右邊沿坐標(biāo)。
[0074]如圖5H所示，A元素的左右兩側(cè)和B元素的上下兩側(cè)相交疊。從節(jié)點的坐標(biāo)區(qū)域反映，A元素的上邊沿坐標(biāo)>B元素的上邊沿坐標(biāo)；B元素的上邊沿坐標(biāo)+B元素在垂直方向上占用的高度>A元素的上邊沿坐標(biāo)；A元素的左邊沿坐標(biāo)〈B元素的左邊沿坐標(biāo)；B元素的左邊沿坐標(biāo)+B元素在水平方向上占用的寬度>A元素的左邊沿坐標(biāo)，A元素的下邊沿坐標(biāo)>B元素的下邊沿坐標(biāo)；A元素的右邊沿坐標(biāo)〈B元素的右邊沿坐標(biāo)。
[0075]如圖6所示，在本發(fā)明一實施方式中，前端頁面的樣式測試裝置包括查詢計算模塊100、對比模塊200、輸出模塊300，其中，
[0076]所述查詢計算模塊100，用于遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間；
[0077]前端頁面可以理解為一個dom樹，頁面中的每一個元素都是dom樹的一個節(jié)點。前端頁面的內(nèi)容和樣式則是通過在頁面的不同位置上擺放或填充不同的元素實現(xiàn)的，不同的擺放方式形成了不同的dom樹，也就構(gòu)成了不同內(nèi)容和樣式的前端頁面。在本發(fā)明一實施方式中，遍歷并計算節(jié)點的實際坐標(biāo)區(qū)間是從底層向上層進行的:
[0078]先計算父節(jié)點下的子葉節(jié)點和所述子葉節(jié)點的兄弟節(jié)點的實際坐標(biāo)區(qū)間；再計算所述父節(jié)點的實際坐標(biāo)區(qū)間。例如，先遍歷并計算父節(jié)點N下的子葉節(jié)點N，然后，判斷該子葉節(jié)點N是否存在兄弟節(jié)點,若該子葉節(jié)點N存在兄弟節(jié)點-子葉節(jié)點N’，則計算該子葉節(jié)點N’的實際坐標(biāo)區(qū)間，直至將所述父節(jié)點N下的所有子葉節(jié)點計算完成，再計算父節(jié)點N的實際坐標(biāo)區(qū)間；然后，判斷父節(jié)點N是否存在兄弟節(jié)點-父節(jié)點M，若存在，則計算父節(jié)點M下的子葉節(jié)點......如此反復(fù)，直至完成dom樹下所有節(jié)點的計算。
[0079]以圖1A為例，通過遍歷前端頁面對應(yīng)的dom樹，可查詢到包括與“詳情頁-請點擊這里”這個元素對應(yīng)的節(jié)點，并且獲得該節(jié)點的屬性，例如，該節(jié)點在水平方向上占用的空間長寬為150px，其在水平方向上的當(dāng)前坐標(biāo)區(qū)間為(200，300)，其中，其起點坐標(biāo)為(200，0)，經(jīng)過計算，可以得知，該節(jié)點的實際坐標(biāo)區(qū)間應(yīng)為(200，(200+150))=(200，350)。
[0080]比對模塊200，用于將每個節(jié)點的實際坐標(biāo)區(qū)間與其兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷其坐標(biāo)區(qū)間是否有交疊，其中，當(dāng)前坐標(biāo)區(qū)間是指該坐標(biāo)目前dom樹下所定義的坐標(biāo)區(qū)間；
[0081]以圖1A為例,五角星圖標(biāo)當(dāng)前坐標(biāo)區(qū)間為(300,310)。明顯地,該五角星圖標(biāo)的當(dāng)前坐標(biāo)區(qū)間和文本“詳情頁-請點擊這里”的實際坐標(biāo)區(qū)間存在交疊，可判斷該交疊會導(dǎo)致前端頁面的元素存在樣式混疊的情況。當(dāng)前，也可以通過“詳情頁-請點擊這里”的實際坐標(biāo)區(qū)間與五角星圖標(biāo)的實際坐標(biāo)區(qū)間比對，例如通過上述步驟計算出的五角星圖標(biāo)的實際坐標(biāo)區(qū)間為(300，320)，那么，該五角星圖標(biāo)的當(dāng)前坐標(biāo)區(qū)間和文本“詳情頁-請點擊這里”的實際坐標(biāo)區(qū)間存在交疊。
[0082]其中，在本發(fā)明一實施方式中，所述比對模塊200還用于
[0083]判斷當(dāng)前節(jié)點與下一節(jié)點是否為父子關(guān)系，若是，則不進行比對，取另一節(jié)點作為當(dāng)前節(jié)點再行判斷，若否，則按照上述方式比對當(dāng)前節(jié)點的實際坐標(biāo)區(qū)間和下一節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間是否交疊；
[0084]判斷當(dāng)前節(jié)點與下一節(jié)點是否為包含關(guān)系，若是，則不進行比對，取另一節(jié)點作為當(dāng)前節(jié)點再行判斷，若否，則根據(jù)當(dāng)前節(jié)點的實際坐標(biāo)區(qū)間與下一節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷坐標(biāo)區(qū)間是否存在交疊。
[0085]輸出模塊300，用于將坐標(biāo)區(qū)間有交疊的兩節(jié)點的至少其中之一作為具有樣式缺陷的節(jié)點。進一步地，在本發(fā)明一實施方式中，可自動針對具有樣式缺陷的區(qū)域進行標(biāo)記和截圖，并輸出測試結(jié)果。
[0086]需要注意的是，在上述以圖1A至圖1C的例子中，為了方便表述和理解，只取了一個維度的坐標(biāo)，即水平坐標(biāo)X，然而，實際上所述實際坐標(biāo)區(qū)間包括:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。在任何一個維度上出現(xiàn)交疊都會導(dǎo)致前端頁面的元素樣式混疊。
[0087]如圖5所示，本發(fā)明一實施方式提供了另一種前端頁面的樣式測試裝置，包括查詢計算模塊100、比對模塊200、輸出模塊300，其中，
[0088]查詢計算模塊100,用于遍歷前端頁面對應(yīng)的dom樹上的節(jié)點,根據(jù)每個節(jié)點的起始坐標(biāo)和節(jié)點的實際面積計算每個節(jié)點的實際坐標(biāo)區(qū)間；
[0089]前端頁面可以理解為一個dom樹，頁面中的每一個元素都是dom樹的一個節(jié)點。前端頁面的內(nèi)容和樣式則是通過在頁面的不同位置上擺放或填充不同的元素實現(xiàn)的，不同的擺放方式形成了不同的dom樹，也就構(gòu)成了不同內(nèi)容和樣式的前端頁面。在本發(fā)明一實施方式中，遍歷并計算節(jié)點的實際坐標(biāo)區(qū)間是從底層向上層進行的:
[0090]先計算父節(jié)點下的子葉節(jié)點和所述子葉節(jié)點的兄弟節(jié)點的實際坐標(biāo)區(qū)間；再計算所述父節(jié)點的實際坐標(biāo)區(qū)間。例如，先遍歷并計算父節(jié)點N下的子葉節(jié)點N，然后，判斷該子葉節(jié)點N是否存在兄弟節(jié)點,若該子葉節(jié)點N存在兄弟節(jié)點-子葉節(jié)點N’，則計算該子葉節(jié)點N’的實際坐標(biāo)區(qū)間，直至將所述父節(jié)點N下的所有子葉節(jié)點計算完成，再計算父節(jié)點N的實際坐標(biāo)區(qū)間；然后，判斷父節(jié)點N是否存在兄弟節(jié)點-父節(jié)點M，若存在，則計算父節(jié)點M下的子葉節(jié)點......如此反復(fù)，直至完成dom樹下所有節(jié)點的計算。
[0091]比對模塊200，用于將每個節(jié)點的實際坐標(biāo)區(qū)間與該節(jié)點的當(dāng)前坐標(biāo)區(qū)間相比對，其中，當(dāng)前坐標(biāo)區(qū)間是指該坐標(biāo)目前dom樹下所定義的坐標(biāo)區(qū)間；
[0092]輸出模塊300，用于當(dāng)節(jié)點的實際坐標(biāo)區(qū)間和當(dāng)前坐標(biāo)區(qū)間不相同時，將該節(jié)點作為具有樣式缺陷的節(jié)點。
[0093]以圖1A為例，通過遍歷前端頁面對應(yīng)的dom樹，可查詢到包括與“詳情頁-請點擊這里”這個元素對應(yīng)的節(jié)點，并且獲得該節(jié)點的屬性，例如，該節(jié)點在水平方向上占用的空間長寬為150px，其在水平方向上的當(dāng)前坐標(biāo)區(qū)間為(200，300)，其中，其起點坐標(biāo)為(200，0)，經(jīng)過計算，可以得知，該節(jié)點的實際坐標(biāo)區(qū)間應(yīng)為(200，(200+150))=(200, 350)。如此，該節(jié)點的實際坐標(biāo)區(qū)間與該節(jié)點的當(dāng)前坐標(biāo)區(qū)間是同，顯然，其在前端頁面所表示的元素和預(yù)設(shè)的排版不一致，是具有樣式缺陷的。進一步地，也可僅當(dāng)節(jié)點的實際坐標(biāo)區(qū)間大于該節(jié)點的當(dāng)前坐標(biāo)區(qū)間時，將該節(jié)點作為具有樣式缺陷的節(jié)點。
[0094]在本發(fā)明一實施方式中，可自動針對具有樣式缺陷的區(qū)域進行標(biāo)記和截圖，并輸出測試結(jié)果。
[0095]需要注意的是，在上述以圖1A至圖1C的例子中，為了方便表述和理解，只取了一個維度的坐標(biāo)，即水平坐標(biāo)X，然而，實際上所述實際坐標(biāo)區(qū)間包括:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。在任何一個維度上出現(xiàn)實際坐標(biāo)區(qū)間與當(dāng)前坐標(biāo)區(qū)間不一致，都會導(dǎo)致前端頁面的元素具有樣式缺陷。
[0096]綜上所述，本發(fā)明通過上述實施方式，可動態(tài)識別前端頁面是否存在樣式錯誤，不僅大大降低了測試人員的工作量，而且顯著提高了效率和準確度。
[0097]所屬領(lǐng)域的技術(shù)人員可以清楚地了解到，為描述的方便和簡潔，上述描述的系統(tǒng)，裝置和單元的具體工作過程，可以參考前述方法實施方式中的對應(yīng)過程，在此不再贅述。
[0098]在本發(fā)明所提供的幾個實施方式中，應(yīng)該理解到，所揭露的系統(tǒng)，裝置和方法，可以通過其它的方式實現(xiàn)。例如，以上所描述的裝置實施方式僅僅是示意性的，例如，所述單元的劃分，僅僅為一種邏輯功能劃分，實際實現(xiàn)時可以有另外的劃分方式，例如多個單元或組件可以結(jié)合或者可以集成到另一個系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，裝置或單元的間接耦合或通信連接，可以是電性，機械或其它的形式。
[0099]所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實際的需要選擇其中的部分或者全部單元來實現(xiàn)本實施方式方案的目的。
[0100]另外，在本發(fā)明各個實施方式中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨物理存在，也可以2個或2個以上單元集成在一個單元中。上述集成的單元既可以采用硬件的形式實現(xiàn)，也可以采用硬件加軟件功能單元的形式實現(xiàn)。
[0101]上述以軟件功能單元的形式實現(xiàn)的集成的單元，可以存儲在一個計算機可讀取存儲介質(zhì)中。上述軟件功能單元存儲在一個存儲介質(zhì)中，包括若干指令用以使得一臺計算機裝置(可以是個人計算機，服務(wù)器，或者網(wǎng)絡(luò)裝置等)或處理器(processor)執(zhí)行本發(fā)明各個實施方式所述方法的部分步驟。而前述的存儲介質(zhì)包括:U盤、移動硬盤、只讀存儲器(Read-Only Memory, ROM)、隨機存取存儲器(Random Access Memory, RAM)、磁碟或者光盤等各種可以存儲程序代碼的介質(zhì)。
[0102]最后應(yīng)說明的是:以上實施方式僅用以說明本發(fā)明的技術(shù)方案，而非對其限制；盡管參照前述實施方式對本發(fā)明進行了詳細的說明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解:其依然可以對前述各實施方式所記載的技術(shù)方案進行修改，或者對其中部分技術(shù)特征進行等同替換；而這些修改或者替換,并不使相應(yīng)技術(shù)方案的本質(zhì)脫離本發(fā)明各實施方式技術(shù)方案的精神和范圍。
【權(quán)利要求】
1.一種前端頁面的樣式測試方法，其特征在于，所述方法包括: 遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間； 將每個節(jié)點的實際坐標(biāo)區(qū)間與其相鄰的兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷其坐標(biāo)區(qū)間是否有交疊； 將坐標(biāo)區(qū)間有交疊的兩節(jié)點的至少其中之一作為具有樣式缺陷的節(jié)點。
2.根據(jù)權(quán)利要求1所述的前端頁面的樣式測試方法，其特征在于，所述“遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間”步驟具體包括: 首先，計算父節(jié)點下的子葉節(jié)點和所述子葉節(jié)點的兄弟節(jié)點的實際坐標(biāo)區(qū)間； 其次，計算所述父節(jié)點的實際坐標(biāo)區(qū)間。
3.根據(jù)權(quán)利要求1所述的前端頁面的樣式測試方法，其特征在于，所述實際坐標(biāo)區(qū)間為:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。
4.根據(jù)權(quán)利要求1所述的前端頁面的樣式測試方法，其特征在于，所述“將每個節(jié)點的實際坐標(biāo)區(qū)間與其相鄰的兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷其坐標(biāo)區(qū)間是否有交疊”步驟具體包括: 判斷當(dāng)前節(jié)點與下一節(jié)點是否為父子關(guān)系，若是，則結(jié)束當(dāng)前節(jié)點的比對；若否，則繼續(xù)比對； 判斷當(dāng)前節(jié)點與下一節(jié)點是否為包含關(guān)系，若是，則結(jié)束當(dāng)前節(jié)點的比對，若否，則根據(jù)當(dāng)前節(jié)點的實際坐標(biāo)區(qū)間與下一節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷坐標(biāo)區(qū)間是否存在交疊。
5.一種前端頁面的樣式測試方法，其特征在于，所述方法包括: 遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間； 當(dāng)一節(jié)點的實際坐標(biāo)區(qū)間與該節(jié)點的當(dāng)前坐標(biāo)區(qū)間不相同時，將該節(jié)點作為具有樣式缺陷的節(jié)點。
6.根據(jù)權(quán)利要求5所述的前端頁面的樣式測試方法，其特征在于，所述“遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間”步驟具體包括: 首先，計算父節(jié)點下的子葉節(jié)點和所述子葉節(jié)點的兄弟節(jié)點的實際坐標(biāo)區(qū)間； 其次，計算所述父節(jié)點的實際坐標(biāo)區(qū)間。
7.根據(jù)權(quán)利要求5所述的前端頁面的樣式測試方法，其特征在于，所述實際坐標(biāo)區(qū)間為:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。
8.一種前端頁面的樣式測試裝置，其特征在于，所述前端頁面的樣式測試裝置包括: 查詢計算模塊，用于遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間； 比對模塊，用于將每個節(jié)點的實際坐標(biāo)區(qū)間與其相鄰的兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷其坐標(biāo)區(qū)間是否有交疊； 輸出模塊，用于將坐標(biāo)區(qū)間有交疊的兩節(jié)點的至少其中之一作為具有樣式缺陷的節(jié)點。
9.根據(jù)權(quán)利要求8所述的前端頁面的樣式測試裝置，其特征在于，所述實際坐標(biāo)區(qū)間為:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。
10.根據(jù)權(quán)利要求8所述的前端頁面的樣式測試裝置，其特征在于，所述比對模塊用于: 判斷當(dāng)前節(jié)點與兄弟節(jié)點是否為父子關(guān)系，若是，則結(jié)束當(dāng)前節(jié)點的比對；若否，則繼續(xù)比對； 判斷當(dāng)前節(jié)點與兄弟節(jié)點是否為包含關(guān)系，若是，則結(jié)束當(dāng)前節(jié)點的比對，若否，則根據(jù)當(dāng)前節(jié)點的實 際坐標(biāo)區(qū)間與其兄弟節(jié)點的實際坐標(biāo)區(qū)間或當(dāng)前坐標(biāo)區(qū)間相比對，判斷坐標(biāo)區(qū)間是否存在交疊。
11.一種前端頁面的樣式測試裝置，其特征在于，所述前端頁面的樣式測試裝置包括: 查詢計算模塊，用于遍歷前端頁面對應(yīng)的dom樹上的節(jié)點，根據(jù)每個節(jié)點占用的空間長寬和起始坐標(biāo)，計算每個節(jié)點的實際坐標(biāo)區(qū)間； 比對模塊，用于將每個節(jié)點的實際坐標(biāo)區(qū)間與該節(jié)點的當(dāng)前坐標(biāo)區(qū)間相比對； 輸出模塊，當(dāng)節(jié)點的實際坐標(biāo)區(qū)間和當(dāng)前坐標(biāo)區(qū)間不相同時，將該節(jié)點作為具有樣式缺陷的節(jié)點。
12.根據(jù)權(quán)利要求11所述的前端頁面的樣式測試裝置，其特征在于，所述實際坐標(biāo)區(qū)間為:(節(jié)點最上邊沿的坐標(biāo)-節(jié)點最下邊沿的坐標(biāo)；節(jié)點最左邊沿的坐標(biāo)-節(jié)點最右邊沿的坐標(biāo))。
【文檔編號】G06F11/36GK104077221SQ201410303018
【公開日】2014年10月1日 申請日期:2014年6月27日 優(yōu)先權(quán)日:2014年6月27日
【發(fā)明者】沈莉霞 申請人:百度在線網(wǎng)絡(luò)技術(shù)（北京）有限公司