摘要:我們將用戶可控制的控制臺稱為虛擬控制臺,以便將其與和頁面內部的區(qū)分開來。同樣,目前在中是不能夠處理相關信息的比如設置這樣做會導致虛擬控制臺發(fā)出,說明此功能未實現(xiàn),并且沒有任何變化也將不會有新的或對象,并且現(xiàn)有對象仍保持當前所有相同的屬性值。
jsdom是一個純粹由 javascript 實現(xiàn)的一系列 web標準,特別是 WHATWG 組織制定的DOM和 HTML 標準,用于在 nodejs 中使用。大體上來說,該項目的目標是模擬足夠的Web瀏覽器子集,以便用于測試和挖掘真實世界的Web應用程序。
最新版本的 jsdom 運行環(huán)境需要 node.js v6或者更高的版本。(jsdom v10以下版本在 nodejs v4以下仍然可用,但是我們已經(jīng)不支持維護了)
v10版本的 jsdom 擁有全新的 API(如下所述).舊的 API 現(xiàn)在仍然支持;詳細的參照文檔
基本用法const jsdom = require("jsdom"); const { JSDOM } = jsdom;
為了使用 jsdom,主要用到jsdom主模塊的一個命名導出的 jsdom 構造函數(shù)。往構造器傳遞一個字符串,將會得到一個 jsdom 構造實例對象,這個對象有很多實用的屬性,特別是 window 對象:
const dom = new JSDOM(`Hello world
`); console.log(dom.window.document.querySelector("p").textContent); // "Hello world"
(請注意,jsdom會像瀏覽器一樣解析您傳遞的HTML,包括隱含的,和標記)
生成的對象是JSDOM類的一個實例,其中包括 window 對象在內的許多有用的屬性和方法。一般來說,它可以用來從“外部”對jsdom進行操作,而這些操作對于普通DOM API來說是不可能的。對于不需要任何功能的簡單場景,我們推薦使用類似的編碼模式
const { window } = new JSDOM(`...`); // or even const { document } = (new JSDOM(`...`)).window;
下面是關于JSDOM類所能做的一切的完整文檔,在“JSDOM對象API”部分。
定制 jsdomJSDOM構造函數(shù)接受第二個參數(shù),可以用以下方式定制您的jsdom。
簡單選項const dom = new JSDOM(``, { url: "https://example.org/", referrer: "https://example.com/", contentType: "text/html", userAgent: "Mellblomenator/9000", includeNodeLocations: true });
url 設置的值可以通過window.location,document.URL和document.documentURI來返回,并會影響文檔中相關URL的解析以及獲取子資源時使用的同源限制和referrer。默認值為"about:blank"。
referrer 僅僅影響document.referrer的值。默認沒有引用(即為空字符串)。
contentType 影響document.contentType的值,是按照HTML解析文檔還是 XML來解析。它的值如果不是text/html或XML mime type 值的話將會拋出異常。默認值為"text/html"。
userAgent 影響navigator.userAgent的值以及請求子資源時發(fā)送的User-Agent頭。默認值為Mozilla / 5.0($ {process.platform})AppleWebKit / 537.36(KHTML,如Gecko)jsdom / $ {jsdomVersion}。
includeNodeLocations 保留由HTML解析器生成的位置信息,允許您使用nodeLocation()方法(如下所述)檢索它。
它還能確保在 `); // 腳本默認將不能執(zhí)行: dom.window.document.body.children.length === 1;
要在頁面內啟用腳本,可以使用runScripts:"dangerously"選項:
const dom = new JSDOM(` `, { runScripts: "dangerously" }); // 腳本將執(zhí)行并修改 DOM: dom.window.document.body.children.length === 2;
我們再次強調只有在提供給jsdom的代碼是你已知道是安全的代碼時方可使用它。如果您運行了任意用戶提供的或Internet上的不可信的Node.js代碼,可能會危及您的計算機。
假如你想通過
如果您不能控制該頁面,則可以嘗試其他解決方法,例如輪詢檢查特定元素是否存在。有關更多詳細信息,請查看#640中的討論,尤其是@ matthewkastor的深刻見解。
共享的構造函數(shù)和原型目前,對于大多數(shù)Web平臺API,jsdom在多個看似獨立的jsdoms之間共享相同的類定義。這將意味著,可能會出現(xiàn)以下情況
const dom1 = new JSDOM(); const dom2 = new JSDOM(); dom1.window.Element.prototype.expando = "blah"; console.log(dom2.window.document.createElement("frameset").expando); // logs "blah"
這主要是出于性能和內存的原因:如果在Web平臺上每次創(chuàng)建jsdom時,創(chuàng)建所有類的多帶帶副本,開銷將會相當昂貴。
盡管如此,我們仍然有興趣在有一天提供一個選項配置來創(chuàng)建一個“獨立”的jsdom,但要犧牲一些性能。
新API中缺失的功能與v9.x之前的舊版jsdom API相比,新API顯然缺少對資源加載的精細控制。先前版本的jsdom允許您設置request時使用的選項(既可以用于初始請求,也可以用于舊版本的JSDOM.fromURL()和子資源請求)。他們還允許您控制請求哪些子資源并將其應用于主文檔,以便您可以下載樣式表,但不下載腳本文件。最后,他們提供了一個可定制的資源加載器,可以攔截任何傳出的請求并用完全合成的response 響應來結束。
以上這些功能尚未在新的jsdom API中實現(xiàn),盡管我們也希望盡快將它們添加回來,但不幸的是,這需要相當大的幕后工作去實施。
同時,請隨時使用舊的jsdom API來訪問此功能。它一直處于支持和維護中,但它不會獲得新功能。舊的文檔位于lib/old-api.md中。
未實現(xiàn)的Web平臺部分目前jsdom中有很多缺失的API,盡管我們也想要在jsdom中添加新的功能并保持最新的Web規(guī)范。請隨時為缺失的任何內容提交issue,但我們是一個很小并且忙碌的團隊,因此大家一起來提交 pull request可能會更好。
除了我們尚未擁有的功能之外,還有兩個主要功能目前超出了jsdom的范圍。這些是:
Navigation:在點擊鏈接或賦值location.href或類似操作時可以更改全局對象和所有其他的對象。
Layout:計算CSS元素的視覺布局的能力,這會影響諸如getBoundingClientRects()或者諸如offsetTop之類的屬性
目前,jsdom對某些功能的某些方面具有虛擬行為,例如操作navigation 時向虛擬控制臺發(fā)送“未實現(xiàn)的”"jsdomError",或者為許多與布局相關的屬性返回0。您通??梢栽诖a中解決這些限制,例如通過在爬網(wǎng)過程中為每個頁面創(chuàng)建新的JSDOM實例,或使用Object.defineProperty更改各種與布局相關的getter和方法的返回值
請注意,相同領域中的其他工具(如PhantomJS)確實支持這些功能。在wiki上,我們有關于jsdom vs. PhantomJS的更完整的比較介紹。
獲取幫助如果您需要jsdom的幫助,請隨時使用以下任何方式:
郵件組(問題最好以"how do i"的形式)
報iusse(最好用BUG 報告)
IRC頻道:#jsdom on freenode
特別聲明以上文檔翻譯自開源項目 jsdom,如有翻譯錯誤,歡迎指正。
jsdom 原文鏈接
jsdom 項目鏈接
jsdom 中文翻譯wiki鏈接
原文博客地址
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://m.hztianpu.com/yun/94976.html
摘要:酷庫,每天兩分鐘,了解一個流行庫。昨天認識了一個在環(huán)境下操作的庫,實現(xiàn)了接口,用起來十分方便。今天,我們要學習的就是一個純實現(xiàn)的,可以在環(huán)境中模擬出環(huán)境,像這樣對依賴的庫就可以在中運行了。 NPM酷庫,每天兩分鐘,了解一個流行NPM庫。 昨天認識了一個在Node.js環(huán)境下操作HTML的庫 cheerio,cheerio實現(xiàn)了jQuery接口,用起來十分方便。為什么不直接用jQuery...
摘要:酷庫,每天兩分鐘,了解一個流行庫。昨天認識了一個在環(huán)境下操作的庫,實現(xiàn)了接口,用起來十分方便。今天,我們要學習的就是一個純實現(xiàn)的,可以在環(huán)境中模擬出環(huán)境,像這樣對依賴的庫就可以在中運行了。 NPM酷庫,每天兩分鐘,了解一個流行NPM庫。 昨天認識了一個在Node.js環(huán)境下操作HTML的庫 cheerio,cheerio實現(xiàn)了jQuery接口,用起來十分方便。為什么不直接用jQuery...
摘要:做這個記錄之前,剛完成使用作為公司前端項目的持續(xù)交付工具的實踐,打算寫的教程前先把官方文檔扒下來做個翻譯站。在實踐一番后,卡在不能頻密調取翻譯這塊上,項目無法進行下去。 做這個記錄之前,剛完成使用drone作為公司前端項目的持續(xù)交付工具的實踐,打算寫的教程前先把官方文檔扒下來做個翻譯站。在實踐一番后,卡在不能頻密調取google翻譯這塊上,項目無法進行下去。最后覺得經(jīng)歷的過程涉及的內容...
摘要:但是,如果我們使用過多的函數(shù)式編程的抽象概念,我們的函數(shù)式編程也會非常難以理解。相比于不太合理的純函數(shù)式編程,我們的代碼更加可讀理解和修改,這也是我們重構代碼的目的。 本文是篇譯文,原文鏈接An Introduction to Reasonably Pure Functional Programming,不當之處還請指正。 一個好的程序員應該有能力掌控你寫的代碼,能夠以最簡單的方法使你...
摘要:前同事留下的測試,是基于瀏覽器的,主要還是功能測試。這里不詳細說怎么在瀏覽器端使用測試了。而且作者也是建議和支持這樣做的,簡單明了的測試腳本,重要性有時候可能和測試本身一樣重要。經(jīng)測試,在瀏覽器也有這種問題。 2016-09-03 更新 隨著在工作學習中更多地接觸、使用測試工具,發(fā)現(xiàn)自己在本文中的一些記錄是不準確、不正確的。 今天(九月三日)在家看了 NingJs 的直播,其中有一個分...
閱讀 3615·2019-08-30 12:58
閱讀 975·2019-08-29 16:37
閱讀 2885·2019-08-29 16:29
閱讀 3169·2019-08-26 12:18
閱讀 2437·2019-08-26 11:59
閱讀 3477·2019-08-23 18:27
閱讀 2854·2019-08-23 16:43
閱讀 3355·2019-08-23 15:23