dfeva
dfeva

Reputation: 65

puppeteer / spatie/Browsershot click a specific attribute

Updated QUESTION (original below is no longer reproduceable): I'm working with spatie/Browsershot to fill a web form. I'm able to get past the first page:

Browsershot::url('https://www.homedepotrebates11percent.com/#/home')
        ->newHeadless()
        ->setNodeBinary('/usr/bin/node')
        ->setNpmBinary('/usr/bin/npm')
        ->setChromePath('/usr/bin/chromium-browser')
        ->waitUntilNetworkIdle()
        ->type('#purchaseDateOnlyText', '09/19/2023)
        ->click('#home-offer-purchasedate-continue2')
        ->delay(1000);

The second page has a "Continue" button id="continueOrSubmitBtn" which I was able to select in the past but now the Continue Button html looks like this and I'm unable to select it:

<div ng-if="!hideContinue" class="ng-scope">
    <div class="col-md-6 col-xs-6 pull-right">
        <div ng-switch="continueType"><!-- ngSwitchWhen: address --><!-- ngSwitchDefault:  -->
            <div ng-switch-default="" class="ng-scope"><a id="continueOrSubmitBtn" ng-disabled="!!disabledWhen"
                    ng-click="disabledWhen || navigationCtrl.next()" class="btn btn-primary cont" tabindex="0"
                    href="javascript:void(0)"><!-- ngIf: pageWorkflow.submitPage -->
                    <!-- ngIf: !pageWorkflow.submitPage --><span ng-if="!pageWorkflow.submitPage"
                        class="ng-binding ng-scope">Continue <span class="glyphicon glyphicon-chevron-right"
                            aria-hidden="true"></span></span><!-- end ngIf: !pageWorkflow.submitPage --></a></div>
            <!-- end ngSwitchWhen: -->
        </div>
    </div>
</div>

To reproduce: https://www.homedepotrebates11percent.com/#/home
Date = 09/19/2023
Continue
"Promotion Details" page shows with the Continue Button active.

Any idea how I can click/select that Continue buttom?
Thanks! Patryk

ORIGINAL QUESTION: I'm working with spatie/Browsershot to fill a web form. I'm able to get past the first page:

Browsershot::url('https://www.homedepotrebates11percent.com/#/home')
        ->newHeadless()
        ->setNodeBinary('/usr/bin/node')
        ->setNpmBinary('/usr/bin/npm')
        ->setChromePath('/usr/bin/chromium-browser')
        ->waitUntilNetworkIdle()
        ->type('#purchaseDateOnlyText', '09/19/2023)
        ->click('#home-offer-purchasedate-continue2')
        ->delay(1000);

The second page has, what looks like a radio group, and I need to select a specific one before continuing. The code for one of the selects:

<div class="panel panel-default ng-scope sel" ng-repeat="promo in promoSelectCtrl.promotions" ng-click="promoSelectCtrl.select($index)" ng-class="{sel: $index == promoSelectCtrl.selected}" style="">
    <div class="select-text panel-heading">
        <span class="fa fa-check-circle" ng-class="($index == promoSelectCtrl.selected) ? 'fa-check-circle' : 'fa-circle-thin'" aria-hidden="true" style="">
        </span><div id="selectRebate" translate="content.SELECT_SELECT_REBATE_TEXT" class="ng-scope">SELECT THIS REBATE</div></div><div class="panel-body promo-descr">
            <div class="row"><div class="col-md-12">
                <!-- ngIf: !promoSelectCtrl.isDisplayCampaignWebDescription -->
                <p ng-if="!promoSelectCtrl.isDisplayCampaignWebDescription" id="11% Rebate - Valid Only on Purchase Dates 08/28/2023 - 09/24/2023" class="ng-scope">
                    <strong translate="content.PC2_23_16661_NAME" translate-default="11% Rebate - Valid Only on Purchase Dates 08/28/2023 - 09/24/2023" class="ng-scope">
                        11% Rebate - Valid Only on Purchase Dates 08/28/2023 - 09/24/2023
                    </strong>
                </p>
                <!-- end ngIf: !promoSelectCtrl.isDisplayCampaignWebDescription -->
                <!-- ngIf: promoSelectCtrl.isDisplayCampaignWebDescription --><!-- ngIf: !hidePurchaseDates -->
                <p ng-if="!hidePurchaseDates" class="ng-binding ng-scope">Purchase Dates: 08/28/2023 - 09/24/2023</p>
                <!-- end ngIf: !hidePurchaseDates --><!-- ngIf: submitby --><!-- ngRepeat: (key, value) in promo.additionalData -->
            </div>
        </div>
    </div>
</div>

To reproduce: https://www.homedepotrebates11percent.com/#/home
Date = 09/19/2023
Continue
list of the radio group should be shown on page.

Any idea how I can click on one of these radio buttons(that are not really radio buttons?).
Thanks! Patryk

[Edit 1]: For reference this is what the page in question looked like: enter image description here

Upvotes: 0

Views: 335

Answers (0)

Related Questions