Как получить доступ к элементам li, которые не отображаются в разобранном тексте?

Question

Я пытаюсь выполнить простое упражнение по разбору html - получить ссылки на изображения страницы пользователя в vsco.я дошел до той части кода, где на странице перечислены изображения (div -> ul -> li), но по какой-то причине я не получаю часть кода li, которая должна содержать изображения.Что я делаю неправильно?мой код, чтобы получить ul до сих пор:

section = soup.find('body').find('div',class_='page-wrap').find('section').find('div',class_='css-1vgyuuf').find('section').find('ul',style='display:flex;justify-content:center')

когда я добавляю find ('li'), ничего не появляется.даже пытался использовать атрибут класса li, но ничего не показывает.заранее спасибо

редактировать: ссылка на страницу vsco https://vsco.co/vsco/journal/p/1

Answer 1

Проблема с этим сайтом в том, что искомая информация выводится с помощью javascript в DOM после загрузки страницы.К счастью, информация остается в том же ответе, но внутри кода javascript.

Необходимая информация находится внутри тега script, который содержит строку __PRELOADED_STATE__.Позже вам нужно получить информацию внутри переменной и проанализировать ее как json:

import re
import json

...

script_text = soup.find(lambda tag: tag.name=="script" and '__PRELOADED_STATE__' in tag.text)
json_object = re.search('window\.__PRELOADED_STATE__ \= (\{.+\})', str(script_text)).group(1)
info = json.loads(json_object)
for key, article in info['entities']['articles'].items():
    for image in article['body']:
        if type(image['content'][0]) is dict:
            print(image['content'][0]['responsiveUrl'])

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