Надеюсь, кто-нибудь может помочь. У меня возникла странная ситуация, когда кукловод распознавал новые изображения по щелчкам при смене цвета, но не по ползунку. Когда я делаю снимок экрана после каждого щелчка, снимок экрана каждый раз отражает новое изображение, но когда я загружаю изображение, оно не работает при втором наборе щелчков. Приведенный ниже фрагмент кода основан на следующем сайте для целей тестирования.
https://www.volkswagen.com.au/app/configurator/vw-au/en/polo/30203/38600/70tsi-trendline/AW12LV-GPBAPBA-GPH2PH2-GPJ1PJ1-GPU2PU2-GPWGPWG-GZEXZEX/2020/0/F14%200Q0Q/F56%20%20%20%20%20EL/+?page=exterior&postcode=2000
Код сначала собирает все параметры цвета, что прекрасно работает. Затем я go и нажимаю на слайдер изображений, чтобы получить все остальные изображения, которые не работают, даже если это тот же контейнер изображений / sr c, который отправляется в функцию загрузки изображений.
Почему бы 1-й набор кликов получает все правильные изображения, а 2-й набор кликов нет?
Я пытался получить изображение sr c с XPATH, а также с помощью page.evaluate, и у них обоих есть та же проблема. Я что-то здесь упускаю?
Я установил headless: false
для просмотра процесса и все нормально в Chrome ...
const clickCollect = async (imageSrc, name) => {
await page.screenshot({ path: name + '_screenshot.png' });
// download image code comes here .. using axios
};
rotationLinks = await page.$x(
"//div[starts-with(@class,'grid-cell card card-single-select')]"
);
console.log('Found ' + rotationLinks.length + ' colours');
//**some other code to confirm we get the images **//
const rotationLinksTxt = await page.$x(
"//p[@class='copy copy--1 copy--bold card-content-colors__name']/text()"
);
var tempImage;
var imageSrc;
for (var x = 0; x < rotationLinks.length; x++) {
var colourName = await page.evaluate(
p => p.textContent,
rotationLinksTxt[x]
);
await rotationLinks[x].click();
await page.waitFor(3500);
tempImage = await page.evaluate(() => {
return Array.from(
document.querySelectorAll(
'.image.image--full-width.image-with-placeholder__image.image-with-placeholder__image--needs-ratio'
),
img => img.src
);
});
imageSrc = tempImage[0];
await clickCollect(
imageSrc,
colourName.replace(' ', '_')
).catch(function(err) {
'collecting image failed: ' + err;
});
await page.waitFor(3500);
console.log('Done with the main colour images');
console.log('Looking for additional model images');
const additionalImages = await page.$x(
"//span[@class='lentil lentil--clickable']"
);
console.log('Found ' + additionalImages.length + ' additional images');
for (var a = 0; a < additionalImages.length; a++) {
await additionalImages[a].click();
await page.waitFor(3500);
tempImage = await page.evaluate(() => {
return Array.from(
document.querySelectorAll(
'.image.image--full-width.image-with-placeholder__image.image-with-placeholder__image--needs-ratio'
),
img => img.src
);
});
imageSrc = tempImage[0];
await page.waitFor(3500);
await clickCollect(
imageSrc,
a + colourName.replace(' ', '_')
).catch(function(err) {
'collecting image failed: ' + err;
});
await page.waitFor(3500);
}
return false;
}