panther

การทดสอบเบราว์เซอร์และห้องสมุดขูดเว็บสำหรับ PHP และ Symfony

Panther เป็นห้องสมุดแบบสแตนด์อโลนที่สะดวกในการขูดเว็บไซต์และเพื่อเรียกใช้การทดสอบแบบครบวงจร โดยใช้เบราว์เซอร์จริง

แพนเทอร์มีพลังมาก มันใช้ประโยชน์จากโปรโตคอล WebDriver ของ W3C เพื่อขับเคลื่อนเว็บเบราว์เซอร์พื้นเมืองเช่น Google Chrome และ Firefox

แพนเทอร์ใช้งานง่ายมากเพราะใช้เบราว์เซอร์ยอดนิยมของ Symfony และ Domcrawler APIs และมีคุณสมบัติทั้งหมดที่คุณต้องการทดสอบแอพของคุณ มันจะฟังดูคุ้นเคยถ้าคุณเคยสร้างการทดสอบการทำงานสำหรับแอพ Symfony: เนื่องจาก API เหมือนกันทุกประการ! โปรดทราบว่าแพนเทอร์สามารถใช้ในทุกโครงการ PHP เนื่องจากเป็นห้องสมุดแบบสแตนด์อโลน

Panther จะค้นหาการติดตั้ง Chrome หรือ Firefox ในพื้นที่ของคุณโดยอัตโนมัติและเปิดตัวดังนั้นคุณไม่จำเป็นต้องติดตั้งสิ่งอื่นใดในคอมพิวเตอร์ของคุณไม่จำเป็นต้องใช้เซิร์ฟเวอร์ซีลีเนียม!

ในโหมดทดสอบ Panther จะเริ่มแอปพลิเคชันของคุณโดยอัตโนมัติโดยใช้เว็บเซิร์ฟเวอร์ในตัว PHP คุณสามารถมุ่งเน้นไปที่การเขียนการทดสอบหรือสถานการณ์การประกายเว็บและ Panther จะดูแลทุกอย่างอื่น

คุณสมบัติ

แตกต่างจากการทดสอบและการขูดเว็บไลบรารีที่คุณคุ้นเคย Panther:

• ดำเนินการรหัส JavaScript ที่มีอยู่ในหน้าเว็บ
• สนับสนุนทุกสิ่งที่ Chrome (หรือ Firefox) ดำเนินการ
• อนุญาตให้ถ่ายภาพหน้าจอ
• สามารถรอองค์ประกอบที่โหลดแบบอะซิงโครนัสเพื่อแสดงขึ้น
• ให้คุณเรียกใช้รหัส js ของคุณเองหรือแบบสอบถาม xpath ในบริบทของหน้าโหลด
• รองรับการติดตั้งเซิร์ฟเวอร์ซีลีเนียมแบบกำหนดเอง
• รองรับบริการทดสอบเบราว์เซอร์ระยะไกลรวมถึง Saucelabs และ BrowserStack

เอกสาร

การติดตั้งแพนเทอร์

ใช้นักแต่งเพลงเพื่อติดตั้ง Panther ในโครงการของคุณ คุณอาจต้องการใช้ธง --dev หากคุณต้องการใช้ Panther สำหรับการทดสอบเท่านั้นและไม่ใช่สำหรับการขูดเว็บในสภาพแวดล้อมการผลิต:

 composer req symfony/panther

composer req --dev symfony/panther

การติดตั้ง Chromedriver และ Geckodriver

Panther ใช้โปรโตคอล WebDriver เพื่อควบคุมเบราว์เซอร์ที่ใช้ในการรวบรวมข้อมูลเว็บไซต์

ในทุกระบบคุณสามารถใช้ dbrekelmans/browser-driver-installer เพื่อติดตั้ง Chromedriver และ Geckodriver ในเครื่อง:

 composer require --dev dbrekelmans/bdi
vendor/bin/bdi detect drivers

Panther จะตรวจจับและใช้ไดรเวอร์ที่เก็บไว้ใน drivers/ ไดเรกทอรีโดยอัตโนมัติ

หรือคุณสามารถใช้แพ็คเกจผู้จัดการระบบปฏิบัติการของคุณเพื่อติดตั้ง

บน Ubuntu, Run:

 apt-get install chromium-chromedriver firefox-geckodriver

บน Mac โดยใช้ Homebrew:

 brew install chromedriver geckodriver

บนหน้าต่างโดยใช้ช็อคโกแลต:

 choco install chromedriver selenium-gecko-driver

ในที่สุดคุณสามารถดาวน์โหลด Chromedriver ด้วยตนเอง (สำหรับโครเมียมหรือ Chrome) และ Geckodriver (สำหรับ Firefox) และวางไว้ที่ใดก็ได้ใน PATH ของคุณหรือใน drivers/ ไดเรกทอรีของโครงการของคุณ

การลงทะเบียนส่วนขยาย phpunit

หากคุณตั้งใจจะใช้ Panther เพื่อทดสอบแอปพลิเคชันของคุณเราขอแนะนำให้ลงทะเบียนส่วนขยาย Panther Phpunit ในขณะที่ไม่ได้บังคับอย่างเคร่งครัดส่วนขยายนี้ปรับปรุงประสบการณ์การทดสอบอย่างมากโดยการเพิ่มประสิทธิภาพและอนุญาตให้ใช้โหมดการดีบักแบบโต้ตอบ

เมื่อใช้ส่วนขยายร่วมกับตัวแปรสภาพแวดล้อม PANTHER_ERROR_SCREENSHOT_DIR การทดสอบโดยใช้ไคลเอนต์ PANTHER ที่ล้มเหลวหรือเกิดข้อผิดพลาด (หลังจากไคลเอ็นต์ถูกสร้างขึ้น) จะได้รับภาพหน้าจอโดยอัตโนมัติเพื่อช่วยในการดีบัก

ในการลงทะเบียนส่วนขยายของ Panther ให้เพิ่มบรรทัดต่อไปนี้ไปยัง phpunit.xml.dist :

 <!-- phpunit.xml.dist -->
< extensions >
    < extension class = " SymfonyComponentPantherServerExtension " />
</ extensions >

หากไม่มีส่วนขยายเว็บเซิร์ฟเวอร์ที่ใช้โดยแพนเทอร์เพื่อให้บริการแอปพลิเคชันภายใต้การทดสอบเริ่มต้นขึ้นตามความต้องการและหยุดเมื่อเรียกว่า tearDownAfterClass() ในทางกลับกันเมื่อมีการลงทะเบียนส่วนขยายเว็บเซิร์ฟเวอร์จะหยุดหลังจากการทดสอบครั้งล่าสุดเท่านั้น

การใช้งานขั้นพื้นฐาน

 <?php

use Symfony  Component  Panther  Client ;

require __DIR__ . ' /vendor/autoload.php ' ; // Composer's autoloader

$ client = Client :: createChromeClient ();
// Or, if you care about the open web and prefer to use Firefox
$ client = Client :: createFirefoxClient ();

$ client -> request ( ' GET ' , ' https://api-platform.com ' ); // Yes, this website is 100% written in JavaScript
$ client -> clickLink ( ' Getting started ' );

// Wait for an element to be present in the DOM (even if hidden)
$ crawler = $ client -> waitFor ( ' #installing-the-framework ' );
// Alternatively, wait for an element to be visible
$ crawler = $ client -> waitForVisibility ( ' #installing-the-framework ' );

echo $ crawler -> filter ( ' #installing-the-framework ' )-> text ();
$ client -> takeScreenshot ( ' screen.png ' ); // Yeah, screenshot!

ทดสอบการใช้งาน

คลาส PantherTestCase ช่วยให้คุณสามารถเขียนการทดสอบ E2E ได้อย่างง่ายดาย มันเริ่มต้นแอปของคุณโดยอัตโนมัติโดยใช้เว็บเซิร์ฟเวอร์ PHP ในตัวและให้คุณรวบรวมข้อมูลโดยใช้ Panther เพื่อให้เครื่องมือทดสอบทั้งหมดที่คุณคุ้นเคยจะขยาย TestCase ของ PHPUNIT

หากคุณกำลังทดสอบแอปพลิเคชัน Symfony PantherTestCase จะขยายคลาส WebTestCase โดยอัตโนมัติ หมายความว่าคุณสามารถสร้างการทดสอบการทำงานได้อย่างง่ายดายซึ่งสามารถดำเนินการเคอร์เนลของแอปพลิเคชันของคุณโดยตรงและเข้าถึงบริการที่มีอยู่ทั้งหมดของคุณ ในกรณีนี้คุณสามารถใช้การทดสอบการทดสอบทั้งหมดที่ได้รับจาก Symfony กับ Panther

 <?php

namespace App  Tests ;

use Symfony  Component  Panther  PantherTestCase ;

class E2eTest extends PantherTestCase
{
    public function testMyApp (): void
    {
        $ client = static :: createPantherClient (); // Your app is automatically started using the built-in web server
        $ client -> request ( ' GET ' , ' /mypage ' );

        // Use any PHPUnit assertion, including the ones provided by Symfony
        $ this -> assertPageTitleContains ( ' My Title ' );
        $ this -> assertSelectorTextContains ( ' #main ' , ' My body ' );
        
        // Or the one provided by Panther
        $ this -> assertSelectorIsEnabled ( ' .search ' );
        $ this -> assertSelectorIsDisabled ( ' [type="submit"] ' );
        $ this -> assertSelectorIsVisible ( ' .errors ' );
        $ this -> assertSelectorIsNotVisible ( ' .loading ' );
        $ this -> assertSelectorAttributeContains ( ' .price ' , ' data-old-price ' , ' 42 ' );
        $ this -> assertSelectorAttributeNotContains ( ' .price ' , ' data-old-price ' , ' 36 ' );

        // Use waitForX methods to wait until some asynchronous process finish
        $ client -> waitFor ( ' .popin ' ); // wait for element to be attached to the DOM
        $ client -> waitForStaleness ( ' .popin ' ); // wait for element to be removed from the DOM
        $ client -> waitForVisibility ( ' .loader ' ); // wait for element of the DOM to become visible
        $ client -> waitForInvisibility ( ' .loader ' ); // wait for element of the DOM to become hidden
        $ client -> waitForElementToContain ( ' .total ' , ' 25 € ' ); // wait for text to be inserted in the element content
        $ client -> waitForElementToNotContain ( ' .promotion ' , ' 5% ' ); // wait for text to be removed from the element content
        $ client -> waitForEnabled ( ' [type="submit"] ' ); // wait for the button to become enabled 
        $ client -> waitForDisabled ( ' [type="submit"] ' ); // wait for  the button to become disabled 
        $ client -> waitForAttributeToContain ( ' .price ' , ' data-old-price ' , ' 25 € ' ); // wait for the attribute to contain content
        $ client -> waitForAttributeToNotContain ( ' .price ' , ' data-old-price ' , ' 25 € ' ); // wait for the attribute to not contain content
        
        // Let's predict the future
        $ this -> assertSelectorWillExist ( ' .popin ' ); // element will be attached to the DOM
        $ this -> assertSelectorWillNotExist ( ' .popin ' ); // element will be removed from the DOM
        $ this -> assertSelectorWillBeVisible ( ' .loader ' ); // element will be visible
        $ this -> assertSelectorWillNotBeVisible ( ' .loader ' ); // element will not be visible
        $ this -> assertSelectorWillContain ( ' .total ' , ' €25 ' ); // text will be inserted in the element content
        $ this -> assertSelectorWillNotContain ( ' .promotion ' , ' 5% ' ); // text will be removed from the element content
        $ this -> assertSelectorWillBeEnabled ( ' [type="submit"] ' ); // button will be enabled 
        $ this -> assertSelectorWillBeDisabled ( ' [type="submit"] ' ); // button will be disabled 
        $ this -> assertSelectorAttributeWillContain ( ' .price ' , ' data-old-price ' , ' €25 ' ); // attribute will contain content
        $ this -> assertSelectorAttributeWillNotContain ( ' .price ' , ' data-old-price ' , ' €25 ' ); // attribute will not contain content
    }
}

เพื่อเรียกใช้การทดสอบนี้:

 bin/phpunit tests/E2eTest.php

แมว polymorphic

แพนเทอร์ยังช่วยให้คุณสามารถเข้าถึงการใช้งานเบราว์เซอร์อื่น ๆ ได้ทันทีของ Client และ Crawler ซึ่งแตกต่างจากไคลเอนต์เนทีฟของ Panther ลูกค้าทางเลือกเหล่านี้ไม่สนับสนุน JavaScript, CSS และการจับภาพหน้าจอ แต่พวกเขา เร็วมาก !

มีลูกค้าทางเลือกสองราย:

• ครั้งแรกที่จัดการกับเคอร์เนล symfony โดยตรงที่จัดทำโดย WebTestCase เป็นไคลเอนต์ที่เร็วที่สุด แต่มีให้เฉพาะแอพ Symfony เท่านั้น
• HTTPBROWSER ของ Symfony ที่สอง มันเป็นระดับกลางระหว่างเคอร์เนลของ Symfony และลูกค้าทดสอบของ Panther HttpBrowser ส่งคำขอ HTTP จริงโดยใช้องค์ประกอบ HTTPClient ของ Symfony มันเร็วและสามารถเรียกดูหน้าเว็บใด ๆ ไม่เพียง แต่แอปพลิเคชันภายใต้การทดสอบ อย่างไรก็ตาม HttpBrowser ไม่รองรับ JavaScript และคุณสมบัติขั้นสูงอื่น ๆ เนื่องจากเขียนไว้ใน PHP ทั้งหมด อันนี้มีให้บริการแม้สำหรับแอพที่ไม่ใช่ Symfony!

ส่วนที่สนุกคือลูกค้า 3 รายใช้ API เดียวกันที่แน่นอนดังนั้นคุณสามารถเปลี่ยนจากที่หนึ่งไปอีกที่ ต้องตรวจสอบความถูกต้องด้วยเซิร์ฟเวอร์ SSO ภายนอกหรือไม่?

นี่คือวิธีดึงอินสแตนซ์ของลูกค้าเหล่านี้:

 <?php

namespace App  Tests ;

use Symfony  Component  Panther  PantherTestCase ;
use Symfony  Component  Panther  Client ;

class E2eTest extends PantherTestCase
{
    public function testMyApp (): void
    {
        $ symfonyClient = static :: createClient (); // A cute kitty: Symfony's functional test tool
        $ httpBrowserClient = static :: createHttpBrowserClient (); // An agile lynx: HttpBrowser
        $ pantherClient = static :: createPantherClient (); // A majestic Panther
        $ firefoxClient = static :: createPantherClient ([ ' browser ' => static :: FIREFOX ]); // A splendid Firefox
        // Both HttpBrowser and Panther benefits from the built-in HTTP server

        $ customChromeClient = Client :: createChromeClient ( null , null , [], ' https://example.com ' ); // Create a custom Chrome client
        $ customFirefoxClient = Client :: createFirefoxClient ( null , null , [], ' https://example.com ' ); // Create a custom Firefox client
        $ customSeleniumClient = Client :: createSeleniumClient ( ' http://127.0.0.1:4444/wd/hub ' , null , ' https://example.com ' ); // Create a custom Selenium client
        // When initializing a custom client, the integrated web server IS NOT started automatically.
        // Use PantherTestCase::startWebServer() or WebServerManager if you want to start it manually.

        // enjoy the same API for the 3 felines
        // $*client->request('GET', '...')

        $ kernel = static :: createKernel (); // If you are testing a Symfony app, you also have access to the kernel

        // ...
    }
}

การสร้างเบราว์เซอร์ที่แยกได้เพื่อทดสอบแอพโดยใช้ Mercure หรือ WebSocket

Panther เป็นวิธีที่สะดวกในการทดสอบแอปพลิเคชันด้วยความสามารถแบบเรียลไทม์ซึ่งใช้ Mercure, Websocket และเทคโนโลยีที่คล้ายกัน

PantherTestCase::createAdditionalPantherClient() สร้างเบราว์เซอร์ที่แยกได้เพิ่มเติมซึ่งสามารถโต้ตอบกันได้ ตัวอย่างเช่นสิ่งนี้จะเป็นประโยชน์ในการทดสอบแอปพลิเคชันแชทที่มีผู้ใช้หลายคนเชื่อมต่อพร้อมกัน:

 <?php

use Symfony  Component  Panther  PantherTestCase ;

class ChatTest extends PantherTestCase
{
    public function testChat (): void
    {
        $ client1 = self :: createPantherClient ();
        $ client1 -> request ( ' GET ' , ' /chat ' ); 
 
        // Connect a 2nd user using an isolated browser and say hi!
        $ client2 = self :: createAdditionalPantherClient ();
        $ client2 -> request ( ' GET ' , ' /chat ' );
        $ client2 -> submitForm ( ' Post message ' , [ ' message ' => ' Hi folks ? ' ]);

        // Wait for the message to be received by the first client
        $ client1 -> waitFor ( ' .message ' );

        // Symfony Assertions are always executed in the **primary** browser
        $ this -> assertSelectorTextContains ( ' .message ' , ' Hi folks ? ' );
    }
}

การเข้าถึงบันทึกคอนโซลเบราว์เซอร์

หากจำเป็นคุณสามารถใช้ Panther เพื่อเข้าถึงเนื้อหาของคอนโซล:

 <?php

use Symfony  Component  Panther  PantherTestCase ;

class ConsoleTest extends PantherTestCase
{
    public function testConsole (): void
    {
        $ client = self :: createPantherClient (
            [],
            [],
            [
                ' capabilities ' => [
                    ' goog:loggingPrefs ' => [
                        ' browser ' => ' ALL ' , // calls to console.* methods
                        ' performance ' => ' ALL ' , // performance data
                    ],
                ],
            ]
        );

        $ client -> request ( ' GET ' , ' / ' );
        $ consoleLogs = $ client -> getWebDriver ()-> manage ()-> getLog ( ' browser ' ); // console logs 
        $ performanceLogs = $ client -> getWebDriver ()-> manage ()-> getLog ( ' performance ' ); // performance logs
    }
}

ผ่านข้อโต้แย้งไปยัง Chromedriver

หากจำเป็นคุณสามารถกำหนดค่าอาร์กิวเมนต์เพื่อส่งผ่านไปยัง Binary chromedriver :

 <?php

use Symfony  Component  Panther  PantherTestCase ;

class MyTest extends PantherTestCase
{
    public function testLogging (): void
    {
        $ client = self :: createPantherClient (
            [],
            [],
            [
                ' chromedriver_arguments ' => [
                    ' --log-path=myfile.log ' ,
                    ' --log-level=DEBUG '
                ],
            ]
        );

        $ client -> request ( ' GET ' , ' / ' );
    }
}

ตรวจสอบสถานะของการเชื่อมต่อ webDriver

ใช้ Client::ping() เพื่อตรวจสอบว่าการเชื่อมต่อ webDriver ยังคงทำงานอยู่หรือไม่ (มีประโยชน์สำหรับงานที่ดำเนินมานาน)

เอกสารเพิ่มเติม

เนื่องจาก Panther ใช้ API ของห้องสมุดยอดนิยมจึงมีเอกสารที่กว้างขวางอยู่แล้ว:

• สำหรับคลาส Client อ่านเอกสาร Browserkit
• สำหรับคลาส Crawler อ่านเอกสาร Domcrawler
• สำหรับ WebDriver อ่านเอกสาร PHP WebDriver

ตัวแปรสภาพแวดล้อม

ตัวแปรสภาพแวดล้อมต่อไปนี้สามารถตั้งค่าให้เปลี่ยนพฤติกรรมของแพนเทอร์:

• PANTHER_NO_HEADLESS : การปิดใช้งานโหมดหัวขาดของเบราว์เซอร์ (จะแสดงหน้าต่างการทดสอบซึ่งเป็นประโยชน์ในการดีบัก)
• PANTHER_WEB_SERVER_DIR : หากต้องการเปลี่ยนรูทเอกสารของโครงการ (ค่าเริ่มต้นเป็น ./public/ / เส้นทางที่สัมพันธ์กัน จะต้องเริ่มต้น ด้วย ./ )
• PANTHER_WEB_SERVER_PORT : หากต้องการเปลี่ยนพอร์ตของเว็บเซิร์ฟเวอร์ (ค่าเริ่มต้นเป็น 9080 )
• PANTHER_WEB_SERVER_ROUTER : หากต้องการใช้สคริปต์เราเตอร์เว็บเซิร์ฟเวอร์ซึ่งทำงานที่จุดเริ่มต้นของคำขอ HTTP แต่ละครั้ง
• PANTHER_EXTERNAL_BASE_URI : หากต้องการใช้เว็บเซิร์ฟเวอร์ภายนอก (เว็บเซิร์ฟเวอร์ในตัว PHP จะไม่เริ่มต้น)
• PANTHER_APP_ENV : เพื่อแทนที่ตัวแปร APP_ENV ที่ส่งผ่านไปยังเว็บเซิร์ฟเวอร์ที่เรียกใช้แอป PHP
• PANTHER_ERROR_SCREENSHOT_DIR : เพื่อตั้งค่าไดเรกทอรีพื้นฐานสำหรับภาพหน้าจอความล้มเหลว/ข้อผิดพลาดของคุณ (เช่น ./var/error-screenshots error-screenshots)
• PANTHER_DEVTOOLS : สลับเครื่องมือ Dev ของเบราว์เซอร์ ( enabled ค่าเริ่มต้น, มีประโยชน์ในการแก้ไขข้อบกพร่อง)
• PANTHER_ERROR_SCREENSHOT_ATTACH : เพื่อเพิ่มภาพหน้าจอที่กล่าวถึงข้างต้นเพื่อทดสอบเอาต์พุตในรูปแบบไฟล์แนบ Junit

การเปลี่ยนชื่อโฮสต์และพอร์ตของเว็บเซิร์ฟเวอร์ในตัว

หากคุณต้องการเปลี่ยนโฮสต์และ/หรือพอร์ตที่ใช้โดยเว็บเซิร์ฟเวอร์ในตัวให้ส่ง hostname และ port ไปยังพารามิเตอร์ $options ของเมธอด createPantherClient() :

 // ...

$ client = self :: createPantherClient ([
    ' hostname ' => ' example.com ' , // Defaults to 127.0.0.1
    ' port ' => 8080 , // Defaults to 9080
]);

ตัวแปรสภาพแวดล้อมเฉพาะโครเมี่ยม

• PANTHER_NO_SANDBOX : เพื่อปิดการใช้งาน Sandboxing ของ Chrome (ไม่ปลอดภัย แต่อนุญาตให้ใช้ Panther ในคอนเทนเนอร์)
• PANTHER_CHROME_ARGUMENTS : เพื่อปรับแต่งอาร์กิวเมนต์โครเมี่ยม คุณต้องตั้งค่า PANTHER_NO_HEADLESS เพื่อปรับแต่งอย่างเต็มที่
• PANTHER_CHROME_BINARY : หากต้องการใช้ไบนารี google-chrome อื่น

ตัวแปรสภาพแวดล้อมเฉพาะของ Firefox

• PANTHER_FIREFOX_ARGUMENTS : เพื่อปรับแต่งอาร์กิวเมนต์ Firefox คุณต้องตั้งค่า PANTHER_NO_HEADLESS เพื่อปรับแต่งอย่างเต็มที่
• PANTHER_FIREFOX_BINARY : ใช้ firefox Binary อื่น

การเข้าถึงข้อความที่ซ่อนอยู่

ตามข้อมูลจำเพาะการใช้งาน WebDriver จะส่งคืนเฉพาะข้อความ ที่แสดง โดยค่าเริ่มต้น เมื่อคุณกรองบนแท็ก head (เช่น title ) text() จะส่งคืนสตริงเปล่า ใช้วิธี html() เพื่อรับเนื้อหาที่สมบูรณ์ของแท็กรวมถึงแท็กเอง

โหมดอินเทอร์แอคทีฟ

แพนเทอร์สามารถหยุดชั่วคราวในห้องทดสอบของคุณหลังจากล้มเหลว มันเป็นเวลาพักที่ได้รับการชื่นชมอย่างมากสำหรับการตรวจสอบปัญหาผ่านเว็บเบราว์เซอร์ สำหรับการเปิดใช้งานโหมดนี้คุณต้องใช้ตัวเลือก --debug phpunit โดยไม่ต้องใช้โหมดหัวขาด:

 $ PANTHER_NO_HEADLESS=1 bin/phpunit --debug

Test 'AppAdminTest::testLogin' started
Error: something is wrong.

Press enter to continue...

ในการใช้โหมดอินเทอร์แอคทีฟส่วนขยาย phpunit จะต้อง ลงทะเบียน

ใช้เว็บเซิร์ฟเวอร์ภายนอก

บางครั้งมันสะดวกที่จะนำการกำหนดค่าเว็บเซิร์ฟเวอร์ที่มีอยู่กลับมาใช้ใหม่แทนที่จะเริ่มต้น PHP หนึ่งในตัว ในการทำเช่นนั้นตั้งค่าตัวเลือก external_base_uri :

 <?php

namespace App  Tests ;

use Symfony  Component  Panther  PantherTestCase ;

class E2eTest extends PantherTestCase
{
    public function testMyApp (): void
    {
        $ pantherClient = static :: createPantherClient ([ ' external_base_uri ' => ' https://localhost ' ]);
        // the PHP integrated web server will not be started
    }
}

มีแอปพลิเคชันหลายโดเมน

มันเกิดขึ้นที่แอปพลิเคชัน PHP/Symfony ของคุณอาจให้บริการชื่อโดเมนที่แตกต่างกันหลายชื่อ

เนื่องจากแพนเทอร์ช่วยลูกค้าในหน่วยความจำระหว่างการทดสอบเพื่อปรับปรุงประสิทธิภาพคุณจะต้องเรียกใช้การทดสอบของคุณในกระบวนการแยกต่างหากหากคุณเขียนการทดสอบหลายครั้งโดยใช้ Panther สำหรับชื่อโดเมนที่แตกต่างกัน

ในการทำเช่นนั้นคุณสามารถใช้คำอธิบายประกอบ @runInSeparateProcess phpunit ดั้งเดิมได้

ℹหมายเหตุ: มันสะดวกมากที่จะใช้ตัวเลือก external_base_uri และเริ่มเว็บเซิร์ฟเวอร์ของคุณเองในพื้นหลังเพราะ Panther จะไม่ต้องเริ่มต้นและหยุดเซิร์ฟเวอร์ของคุณในการทดสอบแต่ละครั้ง Symfony CLI เป็นวิธีที่ง่ายและง่ายดายในการทำเช่นนั้น

นี่คือตัวอย่างที่ใช้ตัวเลือก external_base_uri เพื่อกำหนดชื่อโดเมนที่ใช้โดยไคลเอนต์:

 <?php

namespace App  Tests ;

use Symfony  Component  Panther  PantherTestCase ;

class FirstDomainTest extends PantherTestCase
{
    /**
     * @runInSeparateProcess
     */
    public function testMyApp (): void
    {
        $ pantherClient = static :: createPantherClient ([
            ' external_base_uri ' => ' http://mydomain.localhost:8000 ' ,
        ]);
        
        // Your tests
    }
}

 <?php

namespace App  Tests ;

use Symfony  Component  Panther  PantherTestCase ;

class SecondDomainTest extends PantherTestCase
{
    /**
     * @runInSeparateProcess
     */
    public function testMyApp (): void
    {
        $ pantherClient = static :: createPantherClient ([
            ' external_base_uri ' => ' http://anotherdomain.localhost:8000 ' ,
        ]);
        
        // Your tests
    }
}

ใช้พร็อกซี

หากต้องการใช้พร็อกซีเซิร์ฟเวอร์ตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้: PANTHER_CHROME_ARGUMENTS='--proxy-server=socks://127.0.0.1:9050'

รับใบรับรอง SSL ที่ลงชื่อด้วยตนเอง

หากต้องการบังคับให้ Chrome ยอมรับใบรับรองที่ไม่ถูกต้องและได้รับการลงนามด้วยตนเองตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้: PANTHER_CHROME_ARGUMENTS='--ignore-certificate-errors' ตัวเลือกนี้ไม่ปลอดภัย ใช้สำหรับการทดสอบในสภาพแวดล้อมการพัฒนาเท่านั้น ซอฟต์แวร์รวบรวมข้อมูล)

สำหรับ Firefox ให้อินสแตนซ์ลูกค้าเช่นนี้:

 $ client = Client :: createFirefoxClient ( null , null , [ ' capabilities ' => [ ' acceptInsecureCerts ' => true ]]);

การรวมเข้าด้วยกัน

นี่คือภาพนักเทียบท่าที่น้อยที่สุดที่สามารถเรียกใช้เสือดำกับทั้ง Chrome และ Firefox:

 FROM php:alpine

# Chromium and ChromeDriver
ENV PANTHER_NO_SANDBOX 1
# Not mandatory, but recommended
ENV PANTHER_CHROME_ARGUMENTS= '--disable-dev-shm-usage'
RUN apk add --no-cache chromium chromium-chromedriver

# Firefox and GeckoDriver (optional)
ARG GECKODRIVER_VERSION=0.28.0
RUN apk add --no-cache firefox libzip-dev; 
    docker-php-ext-install zip
RUN wget -q https://github.com/mozilla/geckodriver/releases/download/v$GECKODRIVER_VERSION/geckodriver-v$GECKODRIVER_VERSION-linux64.tar.gz; 
    tar -zxf geckodriver-v$GECKODRIVER_VERSION-linux64.tar.gz -C /usr/bin; 
    rm geckodriver-v$GECKODRIVER_VERSION-linux64.tar.gz

สร้างด้วย docker build . -t myproject เรียกใช้กับ docker run -it -v "$PWD":/srv/myproject -w /srv/myproject myproject bin/phpunit

การรวมการกระทำของ GitHub

แพนเทอร์ทำงานนอกกรอบด้วยการกระทำของ GitHub นี่คือไฟล์ .github/workflows/panther.yml ขั้นต่ำเพื่อเรียกใช้การทดสอบ Panther:

 name : Run Panther tests

on : [ push, pull_request ]

jobs :
  tests :

    runs-on : ubuntu-latest

    steps :
      - uses : actions/checkout@v2

      - name : Install dependencies
        run : composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist

      - name : Run test suite
        run : bin/phpunit

การรวม Travis CI

Panther จะทำงานนอกกรอบกับ Travis CI หากคุณเพิ่ม addon Chrome นี่คือไฟล์ .travis.yml ขั้นต่ำเพื่อเรียกใช้การทดสอบ Panther:

 language : php
addons :
  # If you don't use Chrome, or Firefox, remove the corresponding line
  chrome : stable
  firefox : latest

php :
  - 8.0

script :
  - bin/phpunit

การรวม Gitlab CI

นี่คือไฟล์ .gitlab-ci.yml ขั้นต่ำเพื่อเรียกใช้การทดสอบ Panther ด้วย Gitlab CI:

 image : ubuntu

before_script :
  - apt-get update
  - apt-get install software-properties-common -y
  - ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
  - apt-get install curl wget php php-cli php7.4 php7.4-common php7.4-curl php7.4-intl php7.4-xml php7.4-opcache php7.4-mbstring php7.4-zip libfontconfig1 fontconfig libxrender-dev libfreetype6 libxrender1 zlib1g-dev xvfb chromium-chromedriver firefox-geckodriver -y -qq
  - export PANTHER_NO_SANDBOX=1
  - export PANTHER_WEB_SERVER_PORT=9080
  - php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
  - php composer-setup.php --install-dir=/usr/local/bin --filename=composer
  - php -r "unlink('composer-setup.php');"
  - composer install

test :
  script :
    - bin/phpunit

การรวม Appveyor

แพนเทอร์จะทำงานนอกกรอบกับแอพเวย์เวิร์ดตราบใดที่ติดตั้ง Google Chrome นี่คือไฟล์ appveyor.yml ขั้นต่ำในการเรียกใช้การทดสอบ Panther:

 build : false
platform : x86
clone_folder : c:projectsmyproject

cache :
  - ' %LOCALAPPDATA%Composerfiles '

install :
  - ps : Set-Service wuauserv -StartupType Manual
  - cinst -y php composer googlechrome chromedriver firfox selenium-gecko-driver
  - refreshenv
  - cd c:toolsphp80
  - copy php.ini-production php.ini /Y
  - echo date.timezone="UTC" >> php.ini
  - echo extension_dir=ext >> php.ini
  - echo extension=php_openssl.dll >> php.ini
  - echo extension=php_mbstring.dll >> php.ini
  - echo extension=php_curl.dll >> php.ini
  - echo memory_limit=3G >> php.ini
  - cd %APPVEYOR_BUILD_FOLDER%
  - composer install --no-interaction --no-progress

test_script :
  - cd %APPVEYOR_BUILD_FOLDER%
  - php binphpunit

การใช้งานกับเครื่องมือทดสอบอื่น ๆ

หากคุณต้องการใช้ Panther กับเครื่องมือทดสอบอื่น ๆ เช่น LiipFunctionalTestBundle หรือหากคุณต้องการใช้คลาสฐานอื่น Panther ได้รับความคุ้มครอง มันให้คุณมี SymfonyComponentPantherPantherTestCaseTrait และคุณสามารถใช้มันเพื่อปรับปรุงโครงสร้างการทดสอบที่มีอยู่ของคุณด้วย Panther Awesomeness:

 <?php

namespace App  Tests  Controller ;

use Liip  FunctionalTestBundle  Test  WebTestCase ;
use Symfony  Component  Panther  PantherTestCaseTrait ;

class DefaultControllerTest extends WebTestCase
{
    use PantherTestCaseTrait ; // this is the magic. Panther is now available.

    public function testWithFixtures (): void
    {
        $ this -> loadFixtures ([]); // load your fixtures
        $ client = self :: createPantherClient (); // create your panther client

        $ client -> request ( ' GET ' , ' / ' );
    }
}

ข้อ จำกัด

ไม่รองรับคุณสมบัติต่อไปนี้ในปัจจุบัน:

• เอกสารการรวบรวมข้อมูล XML (รองรับ HTML เท่านั้น)
• การอัปเดตเอกสารที่มีอยู่ (เบราว์เซอร์ส่วนใหญ่ใช้เพื่อใช้ข้อมูลไม่ใช่เพื่อสร้างหน้าเว็บ)
• การตั้งค่าค่าฟอร์มโดยใช้ไวยากรณ์อาร์เรย์ PHP หลายมิติ
• วิธีการส่งคืนอินสแตนซ์ของ DOMElement (เพราะไลบรารีนี้ใช้ WebDriverElement ภายใน)
• การเลือกตัวเลือกที่ไม่ถูกต้องในการเลือก

คำขอดึงยินดีที่จะเติมช่องว่างที่เหลือ!

การแก้ไขปัญหา

วิ่งด้วย bootstrap 5

หากคุณใช้ Bootstrap 5 คุณอาจมีปัญหาในการทดสอบ Bootstrap 5 ใช้เอฟเฟกต์การเลื่อนซึ่งมีแนวโน้มที่จะทำให้เข้าใจผิดเสือดำ

ในการแก้ไขปัญหานี้เราแนะนำให้คุณปิดการใช้งานเอฟเฟกต์นี้โดยการตั้งค่าตัวแปร bootstrap 5 $ enable-smooth-scroll เป็น false ในไฟล์สไตล์ของคุณ

 $enable-smooth-scroll : false;

บันทึกแพนเทอร์

แมวป่าหลายชนิดถูกคุกคามอย่างมาก หากคุณชอบซอฟต์แวร์นี้ให้ช่วยบันทึกแพนเทอร์ (ของจริง) โดยบริจาคให้กับองค์กร Panthera

การให้เครดิต

สร้างโดยKévin Dunglas สนับสนุนโดย les-tilleuls.coop

Panther สร้างขึ้นบน PHP WebDriver และห้องสมุด FOSS อื่น ๆ อีกมากมาย มันได้รับแรงบันดาลใจจาก nightwatch.js เครื่องมือทดสอบบนเว็บดริเวอร์สำหรับ JavaScript