Finding one element by XPATH using another element - html

Question

I have a website from which I want to extract values using XPATH. These values are changable but generally they are in same repeated node trees (there are hundreds of same structurally node trees with this one changeable value). This is example of one of these tree:
<div style="position: absolute; left: 0px; top: 178px; height: 89px; width: 100%;">
<a class="css-18rtd1e" href="/offers/appunite-backend-developer-elixir">
<div class="css-ysfq6d"></div>
<div class="css-1anw03b"><img src="https://bucket.justjoin.it/offers/company_logos/thumb/22f3ad736e1bc02190ff8beb9d4c55a4de297104.png?1572275788" alt="AppUnite" class="css-h8h6qh"></div>
<div class="css-rmb95w">
<div class="css-fxb39h">
<div class="css-18hez3m">
<div class="css-1x9zltl">Elixir Developer</div>
<div class="css-1suuexb"><span class="css-5fhp0m">Online<br>interview</span></div>
</div>
<div class="css-16tql6o">
<span class="css-112rr0w">7 000 - 11 000 PLN </span>
<div class="css-hw5uoy">New</div>
</div>
</div>
<div class="css-m6o8yl">
<div class="css-pdwro7">
<div class="css-ajz12e">
<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path>
</svg>
AppUnite
</div>
<div class="css-1ihx907">
<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C8.13 2 5 5.13 5 9c0 4.17 4.42 9.92 6.24 12.11.4.48 1.13.48 1.53 0C14.58 18.92 19 13.17 19 9c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path>
</svg>
Poznań
</div>
<span class="css-5fhp0m">Online interview</span>
</div>
<div class="css-1ij7669">
<div class="tag css-1g8us6r">Phoenix</div>
<div class="tag css-1g8us6r">Elixir</div>
<div class="tag css-1g8us6r">Web Applications</div>
</div>
</div>
</div>
</a>
</div>
I want to extract word AppUnite and it would be simple task but there is one condition to be met: I need to use in my XPATH element containing text from "css-1x9zltl" class (in this case it would be word Elixir Developer). In other words I want to get access to AppUnite using extracted word from "css-1x9zltl" class. So beginning is simple: //div[contains(#class, "css-1x9zltl") and text()="Elixir Developer"] but what next?

Answer 1

You want to get the names of the hiring companies.
Since the names of the #class attributes are fixed (css-1x9zltl,css-ajz12e) on JJI website, you can use :
//div[contains(#class,"css-1x9zltl")][contains(.,"Elixir Developer")]/following::div[#class="css-ajz12e"][1]/text()
Note this will select "Elixir Developer", "Senior Elixir Developer" offers. To be more strict, remove the second contains :
//div[contains(#class,"css-1x9zltl")][.="Elixir Developer"]/following::div[#class="css-ajz12e"][1]/text()

Answer 2

If I understand you correctly, in the case of the sample in your question, an xpath expression like this may do the trick:
//div[contains(#class, "css-1x9zltl")]["Elixir Developer"]/ancestor::div[#class="css-fxb39h"][1]/following-sibling::div [#class="css-m6o8yl"]//div[#class="css-ajz12e"]/text()
This expression basically locates the <div> node meeting your class and text conditions, goes up to the first ancestor which is a sibling of the <div> node in which the target text is buried, then goes down to the <div>child node (of that sibling) which contains the target text, and finally selects the text node of that child node.