如何在 React 生成的类名上使用 querySelectorAll？

Question

I am trying to find a selector to select tweets from my feed. However, Twitter is using React and generates random class names like:

#react-root > div > div > div > main > div > div.css-1dbjc4n.r-aqfbo4.r-1niwhzg.r-16y2uox > div > div > div > div > div.css-1dbjc4n.r-1jgb5lz.r-1ye8kvj.r-6337vo.r-13qz1uu > div > section > div > div > div > div:nth-child(9) > div > div > article > div.css-1dbjc4n.r-18u37iz.r-thb0q2 > div.css-1dbjc4n.r-1iusvr4.r-46vdb2.r-5f2r5o.r-bcqeeo > div.css-1dbjc4n.r-19i43ro > div.css-901oao.r-hkyrab.r-1qd0xha.r-a023e6.r-16dba41.r-ad9z0x.r-bcqeeo.r-bnwqim.r-qvutc0 > span

I tried to find a pattern allowing me to retrieve the tweets. Is there a way to retrieve elements with generated by React ?

Answer 1

Yes, you can use this one.

document.querySelectorAll(".css-901oao.r-hkyrab.r-1qd0xha.r-a023e6.r-16dba41.r- 
    ad9z0x.r-bcqeeo.r-bnwqim.r-qvutc0 > .css-901oao.css-16my406.r-1qd0xha.r-ad9z0x.r- 
    bcqeeo.r-qvutc0")

if you wrote it:

document.querySelectorAll(".css-901oao.r-hkyrab.r-1qd0xha.r-a023e6.r-16dba41.r- 
    ad9z0x.r-bcqeeo.r-bnwqim.r-qvutc0")

this will give you the entire tweet block so you can retrieve username, tweet_id, and so on. first query will only give you the tweet text.