Python - How to change the input field value using Selenium for - python

I am trying to change the input field value in a form input using Selenium and Python, but unable to do so.
See time picker
I want to be able to perform .sendKeys() for each one (Hour, Minutes, Seconds, AM/PM). My code is the following:
end_time_input = driver.find_element_by_xpath('/html/body/div[4]/div[4]/div[2]/form/ol/li[2]/div/div/div[2]/div[2]/input')
end_mins_input = driver.find_element_by_css_selector('#ldb\:filter\:list\:1 > div > div > div.mins > div.mi_tx > input')
end_seconds_input = driver.find_element_by_xpath('//*[#id="ldb:filter:list:1"]/div/div/div[4]/div[2]/input')
end_meridian_input = driver.find_element_by_xpath('/html/body/div[4]/div[4]/div[2]/form/ol/li[2]/div/div/div[5]/div[2]/input')
time_input.send_keys("10")
end_mins_input.send_keys("30")
end_seconds_input.send_keys("30")
end_meridian_input.send_keys("AM")
However, this is not working.
I also tried changing the value from the main input --> input id="ldb:filter:list:1:timeInput"
> <div class="time_pick" style="display: inline-block;width: 140px">
<input id="ldb:filter:list:1:timeInput" class="axw-wdb-time ldb-input" name="ldb:filter:list:1:timeInput"
value="5:24:25 PM" placeholder="12:00:00 AM" aria-label="Time input End DateTime" data-timepicki-tim="10"
data-timepicki-mini="24" data-timepicki-sec="25" data-timepicki-meri="PM" style="opacity: 1;">
<div class="timepicker_wrap " style="display: none; top: 20px; left: 0px;"><div class="arrow_top">
</div>
<div class="time" id="time_column"><div class="prev action-next">
</div>
<div class="ti_tx"><input type="text" class="timepicki-input">
</div>
<div class="next action-prev">
</div>
</div>
<div class="mins">
<div class="prev action-next">
</div>
<div class="mi_tx">
<input type="text" class="timepicki-input">
</div>
<div class="next action-prev">
</div>
</div><div class="seconds">
<div class="prev action-next">
</div>
<div class="sec_tx">
<input type="text" class="timepicki-input">
</div>
<div class="next action-prev">
</div>
</div>
<div class="meridian" id="meridian_column">
<div class="prev action-next">
</div>
<div class="mer_tx">
<input type="text" class="timepicki-input" readonly="">
</div>
<div class="next action-prev">
</div>
</div>
</div>
</div>

Is this indeed a webased application? or application based?
With web based, does the element expose another dropdown or typeahead container with different xpath?
If application, elements should be made discoverable in code...

Related

How can i pass the table values to modal in Django?

When the edit option is clicked in the project, I want to transfer all the values in the relevant row into the modal, how can I do this?
here table body
<tbody class="list form-check-all">
{% for x in model %}
<tr>
<td class="id">{{x.name}}</td>
<td class="company_name">{{x.phonenumber}}</td>
<td class="leads_score">{{x.note}}</td>
<td class="phone">{{x.status}}</td>
<td class="location">{{x.callname}}</td>
<td class="date">{{x.dataname}}</td>
<td>
<ul class="list-inline hstack gap-2 mb-0">
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
<a class="edit-item-btn" href="#showModal" data-bs-toggle="modal"><i class="ri-phone-line fs-16"></i></a>
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
and here my modal
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-light p-3">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
</div>
<form action="">
<div class="modal-body">
<input type="hidden" id="id-field" />
<div class="row g-3">
<div class="col-lg-12">
<div>
<label for="leadname-field" class="form-label">Name</label>
<input type="text" id="leadname-field" class="form-control" placeholder="Enter Name" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="company_name-field" class="form-label">Company Name</label>
<input type="email" id="company_name-field" class="form-control" placeholder="Enter company name" required />
</div>
</div>
<!--end col-->
<div class="col-lg-6">
<div>
<label for="leads_score-field" class="form-label">Leads Score</label>
<input type="text" id="leads_score-field" class="form-control" placeholder="Enter lead score" required />
</div>
</div>
<!--end col-->
<div class="col-lg-6">
<div>
<label for="phone-field" class="form-label">Phone</label>
<input type="text" id="phone-field" class="form-control" placeholder="Enter phone no" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="location-field" class="form-label">Location</label>
<input type="text" id="location-field" class="form-control" placeholder="Enter location" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="hstack gap-2 justify-content-end">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Kapat</button>
<button type="submit" class="btn btn-success" id="add-btn">Kaydet</button>
</div>
</div>
</form>
</div>
</div>
</div>
My codes are like this. When the edit option is clicked from here, I want to inherit the values of the relevant row in the table within the modal. How can I do that?
so basically I would do that this way - when you load modal, the element that triggers it has data-id attribute and you send it over AJAX to the Django view. Then, before the modal's fully open, you change html code of the whole div, prepopulated with single-instance template that you send over using JsonResponse.
Something like that should work:
const loadDetails = (e) => {
let btn = $(e.currentTarget);
const modalAjax = $("#modal-ajax");
$.ajax({
url: btn.attr("data-href"),
type: 'GET',
data: {id: <here_you_put_obj_id_using_data_attr>}
dataType: 'json',
beforeSend: function () {
modalAjax.modal("show");
},
success: function (data) {
modalAjax.find('.modal-content').html(data['html_form']);
}
});
};

python scrap chrome web-store comment

I am trying to scrape reviews from Chrome Web-Store and having a problem with how to distinct between a comment and the replies to the comment.
Below is an example for such HTML, where the user "John Smith" has a comment and a reply.
I am currently using pyppeteer to scrap the content.
I tried querySelectionAll for .ba-bc-Xb-K and .ba-bc-Xb and several other ways, but was not able to clearly make identification
<div class="ba-fb">
<div>
<div class="ba-bc-Xb">
<div class="ba-ji-A ba-ua-zl-Xb"><img src="//lh3.googleusercontent.com/a/default-user=s40-c-k" class="Lg-ee-A-O-xb" alt=""></div>
<div class="ba-bc-Xb-K">
<div class="ba-pa">
<span class="comment-thread-displayname" dir="auto">Lucy</span><span class="ba-Eb-Nf">Jun 26, 2022</span>
<div class="ba-Eb-N">
<div class="rsw-stars" aria-label="1 star">
<div class="rsw-starred" aria-hidden="true"></div>
<div class="rsw-unstarred" aria-hidden="true"></div>
<div class="rsw-unstarred" aria-hidden="true"></div>
<div class="rsw-unstarred" aria-hidden="true"></div>
<div class="rsw-unstarred" aria-hidden="true"></div>
</div>
</div>
<br>
<div class="ba-Eb-ba" dir="auto">We use this because its easy to hover and text over phone numbers of clients. IT VERY GLITCHY AND CRASHES OFTEN. 90% our of business runs on SMS texting, so I really wish I didn't use this for my company. If any has a better option please let me know!!!! I've been using this for a year and its getting better!!!!!!! AVOID IF YOU CAN!!!! Customer Service is ALSO TERRIBLE!</div>
</div>
<div class="ba-bc-Xb-cd">
<div class="bd-Ob Aa">
<div class="bd-Ob-L dd">Was this review helpful?</div>
<label class="voting-editor-button XzMRXd-sn"><input class="XzMRXd-sn-lc XzMRXd-lc" type="radio" name="vote_AIe9_BGDdh8EqnrWQb-fggox4SOmWi01kdMh4CdLCQD9oHM2uKG-GiDamTukgoJw7LwDNaVtssNY9zUfkPqZTbmL6bYR7YM8Tfa86zq-joAbx8qi5xjbhVjHguGAQoDUMi0YYV_pkFaVKt6ISOsZBGJKlLvhS3uCBg8VrwTO04skZFgbPvYGgPjeQgCKwOz4LyvBPf6dlvKz">Yes</label><label class="voting-editor-button XzMRXd-eb"><input class="XzMRXd-eb-lc XzMRXd-lc" type="radio" name="vote_AIe9_BGDdh8EqnrWQb-fggox4SOmWi01kdMh4CdLCQD9oHM2uKG-GiDamTukgoJw7LwDNaVtssNY9zUfkPqZTbmL6bYR7YM8Tfa86zq-joAbx8qi5xjbhVjHguGAQoDUMi0YYV_pkFaVKt6ISOsZBGJKlLvhS3uCBg8VrwTO04skZFgbPvYGgPjeQgCKwOz4LyvBPf6dlvKz">No</label>
</div>
<div class="ba-bc-zb-Pe">
<a tabindex="0" class="ba-bc-zb-y z-b-ob-y" role="button">Reply</a><a class="ba-bc-zb-y ba-Eb-xe-ba Pa" role="button" tabindex="0">Delete</a>
<div class="ba-bc-zb-y Da-ub"><a tabindex="0" class="Aa Da-ub-y" role="button">Mark as spam or abuse</a></div>
</div>
</div>
<div class="yb-ba-Eb-k">
<div class="Fg-b-ob-k Pa">
<textarea class="Fg-b-ob-Gc" rows="5" maxlength="4096" aria-label="Write your reply" placeholder="Write your reply"></textarea>
<div class="Od"></div>
<div class="Fg-b-ob-Jb-k"><input type="button" value="Cancel" class="g-c g-c-aSvl1d Aa Fg-b-ob-Fb-c"> <input type="button" value="Post" class="g-c g-c-wb Aa Fg-b-ob-qd-c"></div>
</div>
</div>
<div class="Od"></div>
<div class="Fg-b-ob-fb"></div>
<div class="Fg-b-mb-Fk Pa"><a role="button" tabindex="0" class="mb-Fk-c">Load more replies</a></div>
</div>
</div>
</div>
<div>
<div class="ba-bc-Xb">
<div class="ba-ji-A ba-ua-zl-Xb"><img src="//lh3.googleusercontent.com/a-/AFdZucpu4S27XT0-ymC2sQo4ML3v0EkQWHfQeW-YO5jyPg=s40-c-k" class="Lg-ee-A-O-xb" alt=""></div>
<div class="ba-bc-Xb-K">
<div class="ba-pa">
<span class="comment-thread-displayname" dir="auto">John Smith</span><span class="ba-Eb-Nf">May 24, 2022</span>
<div class="ba-Eb-N">
<div class="rsw-stars" aria-label="1 star">
<div class="rsw-starred" aria-hidden="true"></div>
<div class="rsw-unstarred" aria-hidden="true"></div>
<div class="rsw-unstarred" aria-hidden="true"></div>
<div class="rsw-unstarred" aria-hidden="true"></div>
<div class="rsw-unstarred" aria-hidden="true"></div>
</div>
</div>
<br>
<div class="ba-Eb-ba" dir="auto">Desktop app is interesting and the chrome browser buddy is even better. I wish I was not forced by my company to use the company.</div>
</div>
<div class="ba-bc-Xb-cd">
<div class="bd-Ob Aa">
<div class="bd-Ob-L dd">Was this review helpful?</div>
<label class="voting-editor-button XzMRXd-sn"><input class="XzMRXd-sn-lc XzMRXd-lc" type="radio" name="vote_AIe9_BE0070MjUM89cQCwjN0anL45obXJS3lggtKPsNh1lW8nApB3slGfCkLIRHtWYvTrteJ5Hsx15_Lq2GFBMLLbrKFghCR9XqAfnbN5yIZquqVmHLhEkzLpjGKotj-iX8wKux-rJoLU_8vz3wUKa76z0Ttw8QF2EKBKeT-vhT2WYDm8qPVpdpmgnYnObbYr_aDQlz4P5FD">Yes</label><label class="voting-editor-button XzMRXd-eb"><input class="XzMRXd-eb-lc XzMRXd-lc" type="radio" name="vote_AIe9_BE0070MjUM89cQCwjN0anL45obXJS3lggtKPsNh1lW8nApB3slGfCkLIRHtWYvTrteJ5Hsx15_Lq2GFBMLLbrKFghCR9XqAfnbN5yIZquqVmHLhEkzLpjGKotj-iX8wKux-rJoLU_8vz3wUKa76z0Ttw8QF2EKBKeT-vhT2WYDm8qPVpdpmgnYnObbYr_aDQlz4P5FD">No</label>
</div>
<div class="ba-bc-zb-Pe">
<a tabindex="0" class="ba-bc-zb-y z-b-ob-y" role="button">Reply</a><a class="ba-bc-zb-y ba-Eb-xe-ba Pa" role="button" tabindex="0">Delete</a>
<div class="ba-bc-zb-y Da-ub"><a tabindex="0" class="Aa Da-ub-y" role="button">Mark as spam or abuse</a></div>
</div>
</div>
<div class="yb-ba-Eb-k">
<div class="Fg-b-ob-k Pa">
<textarea class="Fg-b-ob-Gc" rows="5" maxlength="4096" aria-label="Write your reply" placeholder="Write your reply"></textarea>
<div class="Od"></div>
<div class="Fg-b-ob-Jb-k"><input type="button" value="Cancel" class="g-c g-c-aSvl1d Aa Fg-b-ob-Fb-c"> <input type="button" value="Post" class="g-c g-c-wb Aa Fg-b-ob-qd-c"></div>
</div>
</div>
<div class="Od"></div>
<div class="Fg-b-ob-fb">
<div>
<div class="ba-bc-Xb">
<div class="ba-ji-A ba-ua-zl-Xb"><img src="//lh3.googleusercontent.com/a-/AFdZucpu4S27XT0-ymC2sQo4ML3v0EkQWHfQeW-YO5jyPg=s40-c-k" class="Lg-ee-A-O-xb" alt=""></div>
<div class="ba-bc-Xb-K">
<div class="ba-pa">
<span class="comment-thread-displayname" dir="auto">John Smith</span><span class="ba-Eb-Nf">May 24, 2022</span><br>
<div class="ba-Eb-ba" dir="auto">I'm happy to chat with the engineering and UX team to tell you exactly how to fix it.</div>
</div>
<div class="ba-bc-Xb-cd">
<div class="bd-Ob Aa">
<div class="bd-Ob-L dd">Was this review helpful?</div>
<label class="voting-editor-button XzMRXd-sn"><input class="XzMRXd-sn-lc XzMRXd-lc" type="radio" name="vote_AIe9_BFmRFRFwJGRfUDOW8jG3rXnLzUlJu5dFPOnRhcZ3Qpf7k7js81NA_AsDgEfcDAZt0H9yZfs73z4D-hSlo1bxU2QLKaAXG2SMo-85mMfMl_-V6KnhrLHz2FEyGejziQP8UkVi-SsuqBw_lc0GmW9TtC5naBzAp94w9FygzBqeDyguPYXJMc">Yes</label><label class="voting-editor-button XzMRXd-eb"><input class="XzMRXd-eb-lc XzMRXd-lc" type="radio" name="vote_AIe9_BFmRFRFwJGRfUDOW8jG3rXnLzUlJu5dFPOnRhcZ3Qpf7k7js81NA_AsDgEfcDAZt0H9yZfs73z4D-hSlo1bxU2QLKaAXG2SMo-85mMfMl_-V6KnhrLHz2FEyGejziQP8UkVi-SsuqBw_lc0GmW9TtC5naBzAp94w9FygzBqeDyguPYXJMc">No</label>
</div>
<div class="ba-bc-zb-Pe">
<a class="ba-bc-zb-y ba-Eb-xe-ba Pa" role="button" tabindex="0">Delete</a>
<div class="ba-bc-zb-y Da-ub"><a tabindex="0" class="Aa Da-ub-y" role="button">Mark as spam or abuse</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Fg-b-mb-Fk Pa"><a role="button" tabindex="0" class="mb-Fk-c">Load more replies</a></div>
</div>
</div>
</div>
</div>
Generally, I'd avoid using these classnames because they change too fast.
I see that comment on this page can be only one level deep. The parent comment has always <textarea>, so replies don't have it. You can distinguish parent-reply with this:
from bs4 import BeautifulSoup
soup = BeautifulSoup(html_doc, "html.parser") # <-- html_doc is your snippet from the question
out = {}
for div in soup.select("div:has(>.comment-thread-displayname)"):
# this is a reply:
if not div.parent.find("textarea"):
continue
replies = []
for s in div.find_next_siblings():
if (reply := s.find(class_="comment-thread-displayname")) :
name, date, text = reply.parent.get_text(
strip=True, separator="\n"
).split("\n", maxsplit=2)
replies.append((name, date, text))
name, date, text = div.get_text(strip=True, separator="\n").split(
"\n", maxsplit=2
)
out[(name, date, text)] = replies
print(out)
Prints dictionary where keys are 3-item tuples of (name, date, text) of parent comment and values are lists of 3-item tuples of replies:
{
(
"Lucy",
"Jun 26, 2022",
"We use this because its easy to hover and text over phone numbers of clients. IT VERY GLITCHY AND CRASHES OFTEN. 90% our of business runs on SMS texting, so I really wish I didn't use this for my company. If any has a better option please let me know!!!! I've been using this for a year and its getting better!!!!!!! AVOID IF YOU CAN!!!! Customer Service is ALSO TERRIBLE!",
): [],
(
"John Smith",
"May 24, 2022",
"Desktop app is interesting and the chrome browser buddy is even better. I wish I was not forced by my company to use the company.",
): [
(
"John Smith",
"May 24, 2022",
"I'm happy to chat with the engineering and UX team to tell you exactly how to fix it.",
)
],
}

Selenium (Python) : Element is not clickable

I'm trying to select a payment on a website. I have three choices : SEPA, Credit/debit, PayPal. I want to click on Credit/Debit.
It looks like this
Those choices are inside a main div, and each choice is inside another div that contains input (radio type) and label.
The problem is that I can't click on this choice because I have the following error:
selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element is not clickable at point (466, 1613)
with this code:
element = driver.find_element_by_css_selector("input[type='radio'][id='input-method-cc'][value='cc']")
element.click()
I found a workaround that works, but for some reasons it mess up the form and invalidate it.
Here is what I tried:
element = driver.find_element_by_css_selector("input[type='radio'][id='input-method-cc'][value='cc']")
driver.execute_script("arguments[0].click();", element)
I tried other solutions, such as waiting until element visible, xpath, ... but got no result.
I would like to know why my element is not clickable, while I can click on it with javascript?
Any help appreciated! Thanks
HTML Code :
<div id="place-order" class="has-shadow">
<div class="white-box">
<div class="recurly-payment-fields mb-4">
<div class="recurly-payment-buttons row my-4">
<div class="recurly-payment-buttons__item col method-sepa" data-target="method-sepa">
<input type="radio" id="input-method-sepa" name="method" value="sepa" checked="" class="sr-only">
<label class="sr-only" for="method-sepa">SEPA</label>
<div class="recurly-payment-buttons__button p-3 d-flex justify-content-center">
<div class="logo"></div>
</div>
</div>
<div class="recurly-payment-buttons__item col method-cc active" data-target="method-cc">
<input type="radio" id="input-method-cc" name="method" value="cc" class="sr-only">
<label class="sr-only" for="method-cc">Credit Card</label>
<div class="recurly-payment-buttons__button p-3 d-flex justify-content-center">
<div class="logo"></div>
</div>
</div>
<div class="recurly-payment-buttons__item col method-paypal" data-target="method-paypal">
<input type="radio" id="input-method-paypal" name="method" value="paypal" class="sr-only">
<label class="sr-only" for="method-paypal">PayPal</label>
<div class="recurly-payment-buttons__button p-3 d-flex justify-content-center">
<div class="logo"></div>
</div>
</div>
</div>
<div id="recurly-payment-methods" class="recurly-payment-methods">
<div id="field-method-sepa" class="recurly-payment-methods__field method-sepa collapse" style="">
<p>
<label for="iban">IBAN</label>
<input type="text" id="iban" name="iban" class="form-control" placeholder="e.g. FR1420041010050500013M02606" data-recurly="iban">
</p>
</div>
<div id="field-method-cc" class="recurly-payment-methods__field method-cc collapsed collapse show" style="">
<div id="recurly-card-field" name="card">
<div data-recurly-element-id="HYOmiZxK5SgiQBEk" class="recurly-element recurly-element-card">
<iframe allowtransparency="true" frameborder="0" scrolling="no" name="recurly-element--HYOmiZxK5SgiQBEk" allowpaymentrequest="true" style="background: none; width: 100%; height: 100%;" src="https://api.recurly.com/..." tabindex="0"></iframe>
</div>
</div>
</div>
<div id="field-method-paypal" class="recurly-payment-methods__field method-paypal collapsed collapse" style="">
<span class="text-md-3">You will be directed to PayPal when checkout is complete.</span>
</div>
</div>
</div>
<div class="woocommerce-terms-and-conditions-wrapper">
<div class="terms-and-conditions-text mr-4">
<a data-toggle="collapse" href="#terms-and-conditions" class="terms-and-conditions-link" target="">
Clicking
<strong>Submit</strong>
means that you agree to the
<span class="text-link">terms and conditions</span>
.
</a>
</div>
<div id="terms-and-conditions" class="terms-and-conditions collapse rounded">
</div>
</div>
</div>
</div>
Add a wait condition
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
element = WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.CSS_SELECTOR, "input[type='radio'][id='input-method-cc'][value='cc']")))
element.click();
Sometime, it's a size of screen.
The screen magnification feature even with headless mode seems to resolve errors.
javascript :
driver.manage().window().maximize();
python :
driver.maximize_window()
java :
driver.manage().window().maximize();

I want to change the HTML code to Selenium code

Original HTML Code
<form id="commentUpdateForm" method="post" data-commentid="">
<fieldset>
<input type="hidden" name="point" value="">
<div class="grade_star">
<span class="ico_star star_rate">
<span class="ico_star inner_star" style="width: 0%;"></span>
</span>
<em class="num_rate">0<span class="txt_g">/5</span></em>
<span class="txt_word">Please rate it</span>
</div>
<div class="write_review">
<label for="tfReview" class="lab_review">What did you like about this place?</label>
<textarea name="contents" id="tfReview2" class="tf_review"></textarea>
</div>
</fieldset>
</form>
If I click 3 out of 5 points, the HTML code will be changed like this.
<form id="commentUpdateForm" method="post" data-commentid="">
<fieldset>
*<input type="hidden" name="point" value="3">*
<div class="grade_star">
<span class="ico_star star_rate">
*<span class="ico_star inner_star" style="width: 60%;"></span>*
</span>
<em class="num_rate">0<span class="txt_g">/5</span></em>
<span class="txt_word">Normal</span>
</div>
<div class="write_review">
<label for="tfReview" class="lab_review">What did you like about this place?</label>
<textarea name="contents" id="tfReview2" class="tf_review"></textarea>
</div>
</fieldset>
</form>
So what I want to do is to make it possible to modify it with Python Selenium code for points, but I don't know.
You can locate the element with selenium webdriver and modify its value attribute like that:
element = driver.find_element_by_xpath('//form[#id="commentUpdateForm"]//input[name="point"]')
element.setAttribute("value", "3")

Python: the elements disappear while parsing

I had a problem while parsing a website.
HTML on the website:
<div id="service">
<div class="title">category</div>
<div class="itemFrame" id="maintainFrame">
<div class="col" style="display: inline-block;">
<label>
<div class="box fill" rel="1"></div>
apple </label>
</div>
<div class="col" style="display: none;">
<label>
<div class="box" rel="2"></div>
banana </label>
</div>
</div>
</div>
</div>
if "display: inline-block;" or div class="box fill", I will give it a value as Y, if not, I will give a F.
Code:
for num5 in soup.find_all(attrs={'id':'maintainFrame'}):
print(num5)
it prints:
<div class="itemFrame" id="maintainFrame">
<div class="col">
<label>
<div class="box" rel="1"></div>
apple </label>
</div>
<div class="col">
<label>
<div class="box" rel="2"></div>
banana </label>
</div>
</div>
</div>
I don't know why they both show its class="box" and cannot see "style" in this. Because of this, I could not do the rest to distinguish it as Y or F.
The result I expected:
Y #apple
F #banana

Categories

Resources