我正在使用jsdom,jquery和node.js来抓取网站.有什么办法可以发布一个表单并使用jsdom获取生成的下一页窗口.
这是代码
var httpAgent = require('http-agent'),
jsdom = require('jsdom'),
request = require('request');
request({uri:'http://www.orbitz.com'}, function(error, response, body){
if(error && response.statusCode != 200)
console.log('Error on request');
jsdom.env({
html: body,
scripts : [
'http://code.jquery.com/jquery-1.5.min.js'
]
}, function(err, window) {
var $ = window.jQuery;
$('#airOneWay').attr('checked', true);
$('#airRoundTrip').removeAttr('checked');
$('#airOrigin').val('ATL');
$('#airDestination').val('CHI');
// here we need to submit the form $('#airbotForm') and get the resulting window
//console.log($('#airbotForm').html());
});
});
这是需要提交的表单,$('#airbotForm')必须捕获生成的页面.
有人可以帮忙吗？谢谢
我想加载一个HTML文件(使用fs.read),使用jsdom加载DOM,然后更改正文节点的文本(通过jquery).然后我想将编辑后的DOM窗口保存为HTML文件.有没有办法做到这一点？我使用的代码如下:
fs.readFile(file, 'utf8', function(error, data) {
jsdom.env(data, [], function (errors, window) {
var $ = require('jquery')(window);
$(document.body.getElementsByTagName("*")).each(function () {
var content = $(this).text();
var word = "\\b"+wordSuggestions.word+"\\b";
var re = new RegExp(word, "g");
content = content.replace(re, wordSuggestions.suggestion);
$(this).text(content);
});
fs.writeFile(file, data, function (error){ // saving the new HTML file? What should I put instead of data? Window?
});
});
});
我试图操纵远程HTML并返回它操纵.我决定使用JSDOM,但无法弄清楚如何获取被操纵的HTML.有任何想法吗？
jsdom.env({
url: "http://www.cnn.com",
scripts: ["http://code.jquery.com/jquery.js"],
done: function (err, window) {
var $ = window.$;
console.log("HN Links");
var src = $(".ghciTopStoryImage1 img").attr('src','http://lorempixel.com/396/220/');
var headline = $(".blkbigheader span").html('header');
var description = $(".blkbigheader").parent().find("p a:eq(0)").html('text');
// not working....
content =$(window.document).html();
}
});
场景
尝试使用Jest(和Enzyme)测试一个简单的React组件.这个组件使用react-dropzone,我想测试一些涉及DOM的操作,所以我使用jsdom(已经配置create-react-app)
问题
document在我的测试代码中可用但在组件内部可用的对象undefined位于dropzone onDrop回调内部,这会阻止测试运行.
代码
MyDropzone
import React from 'react'
import Dropzone from 'react-dropzone'
const MyDropzone = () => {
const onDrop = ( files ) =>{
fileToBase64({file: files[0]})
.then(base64Url => {
return resizeBase64Img({base64Url})
})
.then( resizedURL => {
console.log(resizedURL.substr(0, 50))
})
}
return (
<div>
<Dropzone onDrop={onDrop}>
Some text
</Dropzone>
</div>
);
};
const fileToBase64 = ({file}) => {
return new Promise((resolve, reject) => {
const reader = new FileReader() …使用canvas@1.2.3和jsdom@3.1.2与节点v0.12.2,我在尝试使用canvas toDataURL()函数时遇到错误.
canvasTest.js:
$(function(){
var canvas = $('<canvas></canvas>').attr({'id':'canvasTest', 'width':'500', 'height':'500'});
var ctx=canvas[0].getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
$('#canvasWrap').append(canvas);
});
HTML测试:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="canvasTest.js"></script>
<script type="text/javascript">
$(function(){
console.log($('body').html());
console.log($('#canvasTest').length);
console.log($('#canvasTest')[0].toDataURL());
})
</script>
</head>
<body>
<div id="canvasWrap"></div>
</body>
</html>
jsdom测试:
var canvas = require('canvas');
var jsdom = require('jsdom');
jsdom.env({
html: '<html><body><div id="canvasWrap"></div></body></html>',
scripts: ['127.0.0.1/jquery-2.1.4.min.js','127.0.0.1/canvasTest.js'],
done:function (err,win) {
var $ = win.jQuery;
$(function(){
console.log($('body').html());
console.log($('#canvasTest').length);
console.log($('#canvasTest')[0].toDataURL());
});
}
});
在我在Chrome中的HTML测试中,我获得了正确的base64编码的画布数据,而在node.js中,错误如下:
TypeError: Cannot read property 'toDataURL' of undefined
我刚开始使用mocha 2.3.3,jsdom 6.5.1和Node.js 4.1.1对React 0.10.0组件进行单元测试.我有这个用于我的单元测试:
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var sinon = require('sinon');
var expect = require('chai').expect;
var jsdom = require('jsdom');
var view = require('../student-name-view.js');
describe('The student name view', function() {
var renderedComponent = null;
var nameChangedStub = sinon.stub();
var nameSubmittedStub = sinon.stub();
before(function() {
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.parentWindow;
this.renderedComponent = TestUtils.renderIntoDocument(
view({
nameChanged: nameChangedStub,
nameSubmitted: nameSubmittedStub
})
);
this.nameInput = TestUtils.findRenderedDOMComponentWithTag(renderedComponent, 'input').getDOMNode();
});
describe('should notify the controller', function() {
it('when the name …我在 Vite/React/TypeScript 应用程序中，正在使用 Vitest 配置我的第一个测试。
当我运行 Button 测试 (yarn vitest) 时，出现以下错误：
packages/frontend/src/components/Generic/Button/Button.test.tsx > Button > should render the button
ReferenceError: document is not defined
据我所知，Vitest 不能与 JSDom 一起使用。我尝试过几件事：
我更喜欢使用第一个选项（使用 vite.config.ts）来仅共享一个配置。是否可以 ？
注 1：我已经安装的 JSdom 有“devDependency”。注 2：要使用 vitest.config.ts，我应该像这样更新 package.json 中的脚本：
"test": "vitest --config ./packages/frontend/vitest.config.ts"
这是我的文件：
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from 'tailwindcss'
export default defineConfig({
server: {
port: …摘要:
我试图测试一个侦听其中的本机DOM事件的React组件componentWillMount.
我发现jsdom(@8.4.0)在调度事件和添加事件监听器时没有按预期工作.
我可以提取的最简单的代码:
window.addEventListener('click', () => {
throw new Error("success")
})
const event = new Event('click')
document.dispatchEvent(event)
throw new Error('failure')
这引发了"失败".
语境:
这是我试图测试的组件的提取/简化版本.你可以在Webpackbin上看到它.
import React from 'react'
export default class Example extends React.Component {
constructor() {
super()
this._onDocumentClick = this._onDocumentClick.bind(this)
}
componentWillMount() {
this.setState({ clicked: false })
window.addEventListener('click', this._onDocumentClick)
}
_onDocumentClick() {
const clicked = this.state.clicked || false
this.setState({ clicked: !clicked })
}
render() {
return <p>{JSON.stringify(this.state.clicked)}</p>
}
} …任何人都可以帮我测试以下功能
function onload(cb){
const image = 'http://placehold.it/350x150'
const img = new Image()
img.src = image
img.onload = () => {
cb()
}
}
在我的测试文件Image中可以通过jsdom获得.我想我可以测试那个cb叫做一次
我正在创建一个基于用户键盘事件（如按 Enter、箭头等）处理焦点的组件。
最好测试该组件是否忽略了 keydown 上的 tab 键。
但是，在触发 keydown tab 事件时，焦点不会像在浏览器中那样改变。
鉴于反应组件 Component.js
import React from 'react'
export default () => (
<>
<button data-testid="one">
one
</button>
<button data-testid="two">
two
</button>
</>
)
和下面的测试 Component.test.js
import React from 'react'
import 'jest-dom/extend-expect'
import { cleanup, fireEvent, render, wait } from 'react-testing-library'
import Component from './Component'
afterEach(cleanup)
it('changes focus on tab', async () => {
const { getByTestId } = render(<Component />)
const one = getByTestId('one')
const two = getByTestId('two')
one.focus()
expect(one).toHaveFocus() …jsdom ×10
javascript ×6
node.js ×4
reactjs ×4
jestjs ×2
jquery ×2
canvas ×1
enzyme ×1
html ×1
mocha.js ×1
sinon-chai ×1
testing ×1
typescript ×1
unit-testing ×1
vite ×1
vitest ×1