使用CSS选择器和javascript声明随按钮单击而更改的文本

Question

I have to assert that with a particular button click the text changes.my javascript code is

.clickEl('[title="Smoke Blue / Chocolate"]')
.assert.elContainsText('.js-product-buying-table [data-id="actual_color"]',        'Smoke Blue / Chocolate');

the html for the text

</div>
<div class="js-product-variant-row product-variant-row" data-id="actual_color">
<label class="label-bold variant-label">
          Actual Color:             
<span class="js-variant-name variant-name">Smoke Blue / Chocolate</span>
<span class="js-unit-price-divider hide-content">
<i class="divider">|</i>
</span>
<span class="js-variant-unit-price variant-unit-price"/>

but when the test case ran the assertion fails with error Selector '.js-variant-name.variant-name' was visible after 228 milliseconds. Debugging information for elContainsText actual text() result:[
Choose an option] where "choose a option" was the default value..with html

<span class="js-variant-name variant-name">Choose an option</span>

Answer 1

I'm not sure what you're trying to get at here with your question because it doesn't make much sense to me but this is what I could muster up for you.

I've just tried to re-do the code from what you've told me.

document.addEventListener('DOMContentLoaded', function() {
    addText();
});

function addText() {
    var colour = document.getElementsByClassName('js-variant-name')[0].innerHTML;
    var result = '';

    if (colour === 'Smoke Red / Rose') {
        result = 'Red';
    } else if (colour === 'Smoke Blue / Chocolate') {
        result = 'Blue';
    } else {
        result = 'Choose an option';
    }
    colour = result;
    }