Как парсить сайты где всё построено на JavaScript?

Question

[felsme]

Как получить контент который подгружается через ajax при захвате html дерева?
Знаю что есть selenium, но слишком долго через него + иногда не желательно чтоб кто то видел сценарий действий.
Выслушаю любые предложения на любых языках и технологиях

Comments

[AWEme]

Смотреть куда браузер шлёт запросы - повторять увиденное с помощью requests.Session

[DanKud]

Запрос через AJAX это ведь такой же обычный HTTP-запрос. Смотрите через Панель Разработчика в браузере какие страницы запрашивает AJAX и парсите их. Или что вы имеете ввиду?

[Роман]

AWEme, DanKud, а вы не сталкивались с сайтами где по запросу приходят только данные (включая данные об интерфейсе, как например при использовании webix). Распарсить такой сайт весьма проблематично.

[Роман]

Артём Петренков, не передергивайте. Данные данным рознь)

[Роман]

Артём Петренков, для начала обратимся к значению слова парсить. Как написано по ссылке, парсить - производить синтаксический анализ, анализировать, разбирать. Таким образом парсить сайт это разбирать и анализировать содержимое сайта, но не в коем случае не просто скачать сайт. Так же следует упомянуть, что у анализа должна быть определенная цель, и этой целью вряд ли являются непонятные куски непонятных данных. Наиболее вероятно, что автору необходимо либо готовое html представление сайта либо какие то осмысленные данные, отображаемые на сайте (например данные профилей пользователей и данные ими на тостере ответы, количество правильных, и т.д.). В своем вопросе автор упоминает сценарии действий и selenium, что так же наводит на мысль об автоматизации получения html представления возможно даже с последующей его обработкой (парсингом).

А теперь покажите мне програмный код, который автоматически получит html представление конечного вида этой простой странички без использования браузеров и безголовых браузеров?

PS: разметка интерфейса на этой страничке выглядит так:

interface.js

(function(exports) {

"use strict";

const calculatedata = {
	staticsize: {
		min: 150,
		max: 200
	},
	staticmass: {
		min: 9.0,
		max: 10.0
	},
	dynamicsize: {
		min: 50,
		max: 100
	},
	dynamicmass: {
		min: 0.1,
		max: 0.5
	},
	step: 0.0001,
	distancemultipler: 1,
	showemitters: true,
	showtailes: true,
	showgrid: true,
	emmitspeed: 66,
	speedcount:0,
	gravityconstant: 0.6674484 //0.00000000006674484
};
exports.data = calculatedata;

exports.init = init;
function init(data){
	const sheet_settings = {
		header: "Настройки листа",
		body: {
			rows: [
				{ 
					id: "sheetclick",
					view: "switch", 
					value: 1,
					labelWidth: 200,
					label:"клик на листе ставит объекты"
				},				
				{ type: "section", template: "тип объектов выставляемых по клику"},
				{ 
					view:"segmented",
					value:"dynamic",
					id: "itemtype",
					options:[
						{ id:"static", value:"статические"},
						{ id:"dynamic", value:"динамические"},
						{ id:"emitter", value:"источники"}
					], 
					align:"center"
				}
			]
		}
	};
	const show_settings = {
		header: "Параметры отображения",
		body: {
			rows: [
				{ 
					id: "gridshow",
					view: "switch", 
					value: 1,
					labelWidth: 200,
					label:"отображать сетку",
					on:{
						onChange: function(newv, oldv){
							calculatedata.showgrid = newv;
						}
					}					
				},			
				{ 
					id: "emittershow",
					view: "switch", 
					value: 1,
					labelWidth: 200,
					//labelRight:"клик ставит объекты"
					label:"отображать источники",
					on:{
						onChange: function(newv, oldv){
							calculatedata.showemitters = newv;
						}
					}					
				},
				{ 
					id: "tailshow",
					view: "switch", 
					value: 1,
					labelWidth: 200,
					label:"отображать шлейф",
					on:{
						onChange: function(newv, oldv){
							calculatedata.showtailes = newv;
						}
					}					
				}
			]
		}
	};

	const phisical_settings = {
		header: "Настройки физических величин",
		body: {
			rows: [
				{ 
					view:"rangeslider",	id: "staticsize", label:"размер статичных", labelWidth: 130,
					value:"150,200",	title: webix.template("#value#"),
	 				min: 1, max: 500,
					on:{
						onChange: function(value){
							calculatedata.staticsize.min = parseInt(value[0]);
							calculatedata.staticsize.max = parseInt(value[1]);
						}
					}
				},
				{ 
					view:"rangeslider", id: "dynamicsize", label:"размер динамических", labelWidth: 130,
					value:"50,100",	title: webix.template("#value#"),
					min: 1, max: 500,
					on:{
						onChange: function(value){
							calculatedata.dynamicsize.min = parseInt(value[0]);
							calculatedata.dynamicsize.max = parseInt(value[1]);
						}
					}
				},			
				{ 
					view:"rangeslider",	id: "staticmass", label:"плотность статичных", labelWidth: 130,
					value:"8.0,10.0", title: v=>{ 
						return parseFloat(v.value).toFixed(1); 
					},
	 				min: 0.1, max: 10.0,  step:0.1,
					on:{
						onChange: function(value){
							calculatedata.staticmass.min = parseFloat(value[0]).toFixed(1);
							calculatedata.staticmass.max = parseFloat(value[1]).toFixed(1);
						}
					}
				},
				{ 
					view:"rangeslider", id: "dynamicmass", label:"плотность динамических", labelWidth: 130,
					value:"0.5,1.5", title: v=>{ 
						return parseFloat(v.value).toFixed(1); 
					},
					min: 0.1, max: 10.0,  step:0.1,
					on:{
						onChange: function(value){
							calculatedata.dynamicmass.min = parseFloat(value[0]).toFixed(1);
							calculatedata.dynamicmass.max = parseFloat(value[1]).toFixed(1);
						}
					}
				}
			]
		}
	};
	const preset_settings = {
		header: "Предустановленные варианты",
		body: {
			rows: [
			]
		}
	};

	const simulate_settings = {
		header: "Управление симуляцией",
		body: {
			rows: [
				{ 
					view:"slider", id: "step", label:"шаг симуляции", labelWidth: 130,
					value: 10,	title: webix.template("#value#"),
					min: 0, max: 100,
					on:{
						onChange: function(value){
							calculatedata.step = 0.00001*(1+parseInt(value));
						}
					}
				},			
				{ 
					view:"slider", id: "emitterspeed", label:"скорость источников", labelWidth: 130,
					value: 66,	title: webix.template("#value#"),
					min: 0, max: 100,
					on:{
						onChange: function(value){
							const q = (100-parseInt(value))/100;
							calculatedata.emmitspeed =	25+q*75;
						}
					}
				},	
				{ 
					id: "itememitter",
					view: "switch", 
					value: 0,
					labelWidth: 200,
					label:"включить источники",
					on:{
						onChange: function(newv, oldv){
							if(newv) calculatedata.isEmitt = true;
							else calculatedata.isEmitt = false;
						}
					}					

				},
				{ 
					id: "simulate",
					view: "switch", 
					value: 0,
					labelWidth: 200,
					label:"включить симуляцию",
					on:{
						onChange: function(newv, oldv){
							if(!newv ){
								calculatedata.isSimulate = false;
								return;
							}
							if( calculatedata.isSimulate ) return;
							calculatedata.isSimulate = true;
							play();

						}
					}					

				}

			]
		}		
	};

	/* панель инструментов */
	const view_tools = {
		id: "view_tools",
		multi:true,
		view:"accordion",
		height: "100%",
		width: 300,
		rows:[
			sheet_settings,
			show_settings,
			phisical_settings,
			preset_settings,
			simulate_settings,
			{}
		]
	};

	const header_view = {
		id:"header_view",
		height: 32,
		css: "tool_bar"
	};

	const main_view = {
		rows:[
			header_view,
			{ 
				type: "space",
				cols:[
					{
						view: "flow",
						adjust:true,
						fillspace: true,
						drag: "target",
						id: "view_sheet",
						type: "line",
						sheet: {
							_offsetx:  -3000,
							_offsety: -2000,
							scale: 0.2
						},
						on: {
							click: mouseclick
						}
					},
					{ view: "resizer"},
					view_tools
				]
			},
			{
				template:"footer",
				height: 22
			}
		]
	};

	webix.ui(main_view);

	function play(){
		if( !calculatedata.isSimulate ) return;
		if( calculatedata.isEmitt ) emmitItems();

		calcItemStep();
		flow.planedReDraw();
		flow.reDraw();
		setTimeout(play,20);
	}


	const flow = $$("view_sheet");
	const tools = flow.flow.t;
 	createItem( {x: 0, y: 0}, "static");
	flow.reDraw();

....

})(this.Interface = {});

[Роман]

Артём Петренков, сами по себе данные не имеют смысла, нужны данные, формализованные для применения на них имеющихся алгоритмов анализа и обработки. При этом, как я понял контекст вопроса, автору нужно распарсить не какойто конкретный сайт а некий, желательно универсальный способ сделать это с любым произвольным сайтом. Учитывая то, как безразмерно раздут зоопарк различных способов и технологий используемых для получения представления, ни о каком, по настоящему универсальном способе речи быть не может, Единтственное, относительно универсальное решение которое я вижу, это брать уже отрендереное представление и выковыривать данные уже из него. Соглашусь с вами, что в определенных ситуациях даный подход может потребовать даже больших трудозатрат чем индивидуальный, ручной подход к анализу отдельно взятого сайта. Но все это сильно зависит от того, что именно мы желаем получить на выходе, и пока автор не уточнит это, выбрать наиболее подходящий путь невозможно, и мы будем спорить до бесконечности.

[felsme]

Роман, например хотел получать посты из вк которые подгружаются через ajax ( не надо предлагать api, там музыка закрыта, в веб версии ещё можно дешифратором выдернуть прямые ссылки ) или в веб версии телеграмма вытащить картинки стикеров или переписку, без js там вообще ничего не работает, даже стартовая страница ( а что насчёт api, для ботов всё расписано, куча информации в интернете, а для обычного api день просидел ничего не понял + не все методы есть которые мне нужны )

[Роман]

felsme, в таком случае вам не поможет мой вариант. Только индивидуальный подход к каждому отдельно взятому сайту с реверсинженерингом протоколов передачи данных.

[glebe]

Роман, обычно при парсинге нужны именно данные, которые подставляются в свои алгоритмы.
А если скачивать и алгоритмы, то это уже не парсинг

[Роман]

glebe, человек как раз и спрашивает, как получить данные для сайтов, в которых эти данные получают с помощью запросов из js.

В таком случае недостаточно открыть "инструменты разработчика" и скопировать из них запросы. Необходимо будет разбираться с авторизацией/сейсиями/токенами а также с параметрами запросов и много еще с чем. В настоящий момент сделать полностью автоматическую систему, способную сделать это с любым произвольным сайтом без участия человека невозможно. Так что остается только вариант с анализом и реверсинженерингом кастомных протоколов передачи данных, форматов информационных пакетов, и скриптов сайта.

[glebe]

Роман, автоматом и с html сайта невозможно спарсить, необходимо как минимум уникальные идентификаторы для конкретного сайта добавить в скрипт парсера.

Но конечная цель - это данные, а не логика их вывода на экран монитора. С сайтов на современных системах управления невозможно скачать логику, только данные.

А вообще я смотрю на это с другой стороны. Очень часто приходится пресекать попытки парсинга извне. Бывает веб-мудрецы придумывают очень хитро.опые схемы запросов. Например с заменой ip через несколько итераций и сбросом своей сессии (заменой всех сессионных данных). Таких распознать сложно, но тоже можно... правда не сразу.

А парсинг данных с сайта - это по сути считывание визуальных данных с монитора. Поэтому неважно на каком языке сайт сделан - яваскрипт, пхп или то и другое и ещё плюс что+то. Достаточно эмулировать действия пользователя в браузере

[Роман]

glebe,

автоматом и с html сайта невозможно спарсить

Разве я не тоже самое сказал (там где про универсальность и трудозатраты)

Достаточно эмулировать действия пользователя в браузере

именно про это и имел ввиду, с той лишь разницей, что предлагал брать данные из отрендеренного представления а вы непосредственно брать их из ответовна запросы.

В моем варианте надо определить признаки нужных данных в готовом html и затем рапарсить dom или делать хитрые регулярки на текст чтобы их достать, в вашем случае разбираться с форматами/протоколами передачи данных.

В зависимости от сайта проще и удобней это делать може быть как моим вариантом так и вашим.

[glebe]

Роман,
Можно так, можно иначе - не суть важно как. Но лично я в принципе против парсинга чужих сайтов.

Если владелец сайта не против массовой выборки данных, то обычно создаётся соответствующее api, ну или на крайний случай какой-нибудь обновляемый xml-файл с актуальными данными. Пожалуйста, подключайся через api или качай файл. Это не создаст нагрузки на сервер.
А если владелец не хочет отдавать данные оптом, то парсинг этих данных является ничем иным как тривиальным воровством

[Роман]

glebe, тут я с вами согласен на все 100.

[glebe]

Роман,

Answer 1

[magersoft]

Puppeteer

Answer 2

[imsha]

Используется что-то в стиле phantomjs

Comments

[marsdenden]

Фантом устарел, кукловод в теме

Answer 3

[Polishchuk88]

Я смотрел в хроме в консоле разработчика куда посылаются ajax запросы и какие параметры в хедере передаются, далие с помощью curl на php делаю запрос и подставляю такие же параметры имитация браузера. В ответ приходит либо готовый html - парсил на phpquery либо приходит json что ещё лучше не надо распаршевать.