"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "jest-puppeteer-ile-uçtan-uca-testlere-giriş", "hProperties": { "id": "jest-puppeteer-ile-uçtan-uca-testlere-giriş" } }, "depth": 2, "value": "jest-puppeteer ile uçtan uca testlere giriş" }, { "data": { "id": "test-ortamınızı-kurma", "hProperties": { "id": "test-ortamınızı-kurma" } }, "depth": 2, "value": "Test ortamınızı kurma" }, { "data": { "id": "yaygın-olarak-kullanılan-apiler", "hProperties": { "id": "yaygın-olarak-kullanılan-apiler" } }, "depth": 2, "value": "Yaygın olarak kullanılan API'ler" }, { "data": { "id": "basit-yapılacaklar-uygulaması", "hProperties": { "id": "basit-yapılacaklar-uygulaması" } }, "depth": 2, "value": "Basit yapılacaklar uygulaması" }, { "data": { "id": "uygulamanın-ve-verilerin-yüklendiğini-varsayın", "hProperties": { "id": "uygulamanın-ve-verilerin-yüklendiğini-varsayın" } }, "depth": 2, "value": "Uygulamanın ve verilerin yüklendiğini varsayın" }, { "data": { "id": "belirli-bir-düğmeye-tıklamayı-bekleyin", "hProperties": { "id": "belirli-bir-düğmeye-tıklamayı-bekleyin" } }, "depth": 2, "value": "Belirli bir düğmeye tıklamayı bekleyin" }, { "data": { "id": "dış-bir-bağlantının-yeni-bir-sekmede-açıldığını-varsayın", "hProperties": { "id": "dış-bir-bağlantının-yeni-bir-sekmede-açıldığını-varsayın" } }, "depth": 2, "value": "Dış bir bağlantının yeni bir sekmede açıldığını varsayın" }, { "data": { "id": "formdan-bir-öğe-oluşturulacağını-varsayın", "hProperties": { "id": "formdan-bir-öğe-oluşturulacağını-varsayın" } }, "depth": 2, "value": "Formdan bir öğe oluşturulacağını varsayın" }, { "data": { "id": "özet", "hProperties": { "id": "özet" } }, "depth": 2, "value": "Özet" }]; const readingTime = { "minutes": 6, "words": 1783, "text": "6 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Logto'nun kalitesini sağlama ve sürekli iyileştirme taahhüdümüzün bir parçası olarak, uçtan uca otomatik testler için jest-puppeteer kullanıyoruz. Bu, Logto'nun geliştirme sürecini aksama olmadan hızlı bir şekilde yinelememizi sağlar." }), "\n", _jsx(_components.p, { children: "Bu makalede, basit bir yapılacaklar uygulaması örneği kullanarak verimli jest-puppeteer test betikleri yazma konusundaki deneyimlerimizi paylaşacağız. Amacımız, kendi projeleriniz için jest-puppeteer test kodu yazmaya hızlı bir şekilde başlamanıza yardımcı olmaktır." }), "\n", _jsxs(_components.h2, { id: "jest-puppeteer-ile-uçtan-uca-testlere-giriş", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#jest-puppeteer-ile-uçtan-uca-testlere-giriş", children: _jsx(_components.span, { children: "#" }) }), "jest-puppeteer ile uçtan uca testlere giriş"] }), "\n", _jsxs(_components.p, { children: ["Uçtan uca testler, uygulamanızın kullanıcı perspektifinden doğru çalıştığını doğrulamanın bir yoludur. Bunu başarmak için iki temel aracı kullanırız: ", _jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " ve ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), ", testler ve çıkarımları yazmak için kullanıcı dostu bir API sunan popüler bir JavaScript test çerçevesidir. Birim ve entegrasyon testleri için geniş çapta kullanılır."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), ", Chrome ekibi tarafından geliştirilen ve başsız Chrome veya Chromium tarayıcıları kontrol etmek için yüksek düzeyde bir API sağlayan bir Node.js kütüphanesidir. Bu, uçtan uca testlerde tarayıcı etkileşimlerini otomatikleştirmek için ideal bir seçim yapar."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer", children: "jest-puppeteer" }), ", Puppeteer ile uçtan uca testleri etkinleştiren bir Jest ön ayarıdır. Yeni tarayıcı örneklerini başlatmak ve web sayfalarıyla etkileşim kurmak için basit bir API sunar."] }), "\n", _jsx(_components.p, { children: "Artık temel araçları anladığınıza göre, test ortamınızı kurmaya başlayalım." }), "\n", _jsxs(_components.h2, { id: "test-ortamınızı-kurma", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#test-ortamınızı-kurma", children: _jsx(_components.span, { children: "#" }) }), "Test ortamınızı kurma"] }), "\n", _jsx(_components.p, { children: "jest-puppeteer ile uçtan uca testler için test ortamınızı kurmak, üç ana adımdan oluşan basit bir işlemdir:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Bağımlılıkları yükleyin" }), "\n"] }), "\n", _jsx(_components.p, { children: "Projenizde (veya yeni bir proje oluşturun) terminali açın ve şu komutu çalıştırın:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm install --save-dev jest jest-puppeteer puppeteer\n" }) }), "\n", _jsxs(_components.p, { children: ["Ardından ", _jsx(_components.code, { children: "node_modules/puppeteer" }), " dizinine gidin ve Puppeteer için gerekli olan Chromium'u yükleyin:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "cd node_modules/puppeteer\nnpm run postinstall\n" }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsx(_components.li, { children: "Jest'i yapılandırın" }), "\n"] }), "\n", _jsx(_components.p, { children: "Sonrasında, Jest'i Puppeteer ile sorunsuz çalışacak şekilde yapılandırmanız gerekir." }), "\n", _jsxs(_components.p, { children: ["Projenizin kök dizininde bir jest yapılandırma dosyası (ör. ", _jsx(_components.code, { children: "jest.config.js" }), ") oluşturun veya zaten varsa, bu dosyada jest-puppeteer'i bir ön ayar olarak belirtin:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "/ @type {import('jest').Config} */;\nconst config = {\n preset: 'jest-puppeteer',\n // Diğer Jest yapılandırmaları...\n};\n\nmodule.exports = config;\n" }) }), "\n", _jsxs(_components.p, { children: ["Bu dosyada diğer Jest ayarlarını gerektiği şekilde özelleştirebilirsiniz. Jest yapılandırmalarını özelleştirme hakkında daha fazla bilgi için ", _jsx(_components.a, { href: "https://jestjs.io/docs/configuration", children: "Jest yapılandırma" }), " dökümanına başvurabilirsiniz."] }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Testlerinizi yazın" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Projenizde test dosyaları oluşturun, genellikle ", _jsx(_components.code, { children: ".test.js" }), " uzantısıyla adlandırılır. Jest bu test dosyalarını otomatik olarak bulacak ve çalıştıracaktır."] }), "\n", _jsxs(_components.p, { children: ["İşte ", _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest dökümanından" }), " bir örnek:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "describe('Google', () => {\n beforeAll(async () => {\n await page.goto('https://google.com');\n });\n\n it('\"Google\" başlığına sahip olmalı', async () => {\n await expect(page.title()).resolves.toMatch('Google');\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Ardından testi çalıştırmak için şu komutu çalıştırın:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx jest\n" }) }), "\n", _jsx(_components.p, { children: "Bu üç adımı uygulayarak jest-puppeteer kullanarak uçtan uca testler yürütmek için iyi yapılandırılmış bir test ortamına sahip olacaksınız." }), "\n", _jsx(_components.p, { children: "Ancak, bunun sadece basit bir örnek olduğunu unutmayın. Ortam yapılandırması hakkında daha ayrıntılı bilgi için ilgili dökümantasyona başvurabilirsiniz:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "Jest: Başlangıç" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest: Puppeteer ile kullanma" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "yaygın-olarak-kullanılan-apiler", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yaygın-olarak-kullanılan-apiler", children: _jsx(_components.span, { children: "#" }) }), "Yaygın olarak kullanılan API'ler"] }), "\n", _jsx(_components.p, { children: "Gelecek adımlarda, testlerimizde Jest, Puppeteer ve jest-puppeteer tarafından sağlanan API'lere güveneceğiz." }), "\n", _jsxs(_components.p, { children: ["Jest, testleri düzenlemek ve beklenen sonuçları doğrulamak için öncelikle API'ler sunar. Belirli ayrıntıları ", _jsx(_components.a, { href: "https://jestjs.io/docs/api", children: "dökümanlarda" }), " keşfedebilirsiniz."] }), "\n", _jsxs(_components.p, { children: ["Puppeteer'in API'leri tarayıcılarla etkileşim kurmak için tasarlanmıştır ve testler için destekleri daha az doğrudan olabilir. Sağladıkları işlevleri anlamak için ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer dökümantasyonuna" }), " başvurabilirsiniz. Sonraki test örneklerimizde bazı yaygın kullanım durumlarını ele alacağız."] }), "\n", _jsxs(_components.p, { children: ["Puppeteer'in API'leri başlangıçta test yazmak için tasarlanmadığından, onları kullanarak test yazmak zorlayıcı olabilir. Puppeteer testlerinin yazım sürecini kolaylaştırmak için jest-puppeteer, ", _jsx(_components.code, { children: "expect-puppeteer" }), " adlı yerleşik bir kütüphane içerir. Bu kütüphane, kısa ve kullanıcı dostu bir dizi API sunar. Kütüphane hakkında daha fazla bilgi ", _jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer#recipes", children: "dökümantasyonunda" }), " bulunabilir ve aşağıdaki örneklerde bazı faydalı özellikler tanıtılmaktadır:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Mevcut sayfanın 'Sayfadaki Metin' içeriğini içerdiğini doğrulayın\nawait expect(page).toMatchTextContent('Sayfadaki Metin');\n\n// Mevcut sayfanın 'Ana Sayfa' içeren bir div elemanına sahip olduğunu doğrulayın\nawait expect(page).toMatchElement('div', { text: 'Ana Sayfa' });\n\n// 'Ana Sayfa' metnini içeren bir düğmeye tıklanacağını doğrulayın\nawait expect(page).toClick('button', { text: 'Ana Sayfa' });\n\n// Bir formun doldurulacağını doğrulayın\nawait expect(page).toFillForm('form[name=\"myForm\"]', {\n firstName: 'James',\n lastName: 'Bond',\n});\n" }) }), "\n", _jsx(_components.p, { children: "Sonraki örneklerde, bu kütüphaneler tarafından sağlanan API'leri test senaryolarımızı tamamlamak için birleştireceğiz." }), "\n", _jsx(_components.p, { children: "Şimdi basit yapılacaklar uygulaması ile test kodu yazmayı öğrenmeye başlayalım." }), "\n", _jsxs(_components.h2, { id: "basit-yapılacaklar-uygulaması", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#basit-yapılacaklar-uygulaması", children: _jsx(_components.span, { children: "#" }) }), "Basit yapılacaklar uygulaması"] }), "\n", _jsxs(_components.p, { children: ["Varsayalım ki ", _jsx(_components.code, { children: "http://localhost:3000" }), " üzerinde çalışan basit bir yapılacaklar uygulamamız var, bu uygulamanın temel HTML kodu şu şekildedir:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

Alex'in Listesi

\n
Bir elma al
\n
Noel için
\n \n
\n
Logto başlarken dökümanını oku
\n
\n Döküman bağlantısı:\n Başlarken \n
\n \n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Uçtan uca testler yaparken aşağıdaki senaryoları kapsamalıyız:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Uygulamanın URL'sini açtığımızda, uygulama ve verileri doğru şekilde yüklenmelidir." }), "\n", _jsx(_components.li, { children: "Öğenin kontrol et düğmesi tıklanabilir olmalıdır." }), "\n", _jsx(_components.li, { children: "Öğe notlarına tıklanarak dış bir bağlantının yeni bir sekmede açılması gerekir." }), "\n", _jsx(_components.li, { children: "Formdan bir öğe eklenebilir." }), "\n"] }), "\n", _jsx(_components.p, { children: "Daha sonra, bu senaryoları doğrulamak için test kodu yazacağız." }), "\n", _jsxs(_components.h2, { id: "uygulamanın-ve-verilerin-yüklendiğini-varsayın", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uygulamanın-ve-verilerin-yüklendiğini-varsayın", children: _jsx(_components.span, { children: "#" }) }), "Uygulamanın ve verilerin yüklendiğini varsayın"] }), "\n", _jsx(_components.p, { children: "Uygulamanın yüklendiğini başarıyla kabul etmemiz için şu koşulların yerine getirilmesi gerekir:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "URL'ye eriştikten sonra sayfada \"app\" ID'sine sahip bir eleman bulunmalıdır." }), "\n", _jsx(_components.li, { children: "Uygulama içindeki veri doğru şekilde görüntülenmelidir." }), "\n"] }), "\n", _jsx(_components.p, { children: "Bu yüzden aşağıdaki test kodunu yazdık:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "\"uygulamanın başarıyla yüklenmesi gerekir\", async () => {\n // Uygulama sayfasına git\n await page.goto('http://localhost:3000');\n\n // Uygulamanın yüklenmesini bekle\n await page.waitForSelector('#app');\n\n // Verilerin yüklendiğini varsayın\n await expect(page).toMatchElement('div[class=title]', {\n text: \"Alex'in Listesi\",\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Kodda:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.goto" }), ", \"", _jsx(_components.a, { href: "http://localhost:3000", children: "http://localhost:3000" }), "\" yazmaya eşdeğerdir, bu da herhangi bir URL'ye gitmenizi sağlar."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.waitForSelector" }), ", belirli bir CSS seçicisinin belirli bir öğeyle eşleşmesini beklemek için kullanılır ve varsayılan bekleme süresi 30 saniyedir."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "expect(page).toMatchElement" }), " ", _jsx(_components.code, { children: "expect-puppeteer" }), " kütüphanesinden gelir ve ", _jsx(_components.code, { children: "page.waitForSelector" }), " ile benzerdir, ancak aynı zamanda bir öğe içindeki metni de eşleştirmeyi destekler. Ayrıca, ", _jsx(_components.code, { children: "toMatchElement" }), " için varsayılan zaman aşımı yalnızca 500ms'dir."] }), "\n"] }), "\n", _jsx(_components.p, { children: "İlk bakışta mükemmel görünüyor olabilir, ancak bu testi çalıştırırken ve bir CI ortamına dağıtırken, birden fazla yürütmeden sonra zaman zaman başarısız olur. Hata mesajı şu şekildedir:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "500ms bekledikten sonra \"title\" class adına sahip bir “div” bulamıyoruz ve \"Alex'in Listesi\" metnini içeriyor.\n" }) }), "\n", _jsx(_components.p, { children: "Başarısızlık bilgisine ve bu testin çoğu zaman geçtiği gerçeğine dayanarak, uygulamanın başlatılmasından sonraki ilk 500ms içinde istenen verilerin her zaman dönmediğini çıkarabiliriz. Bu nedenle, verilerin yüklenmesini beklemek ve ardından doğrulama yapmak istiyoruz." }), "\n", _jsx(_components.p, { children: "Genellikle, bunu başarmanın iki yaygın yaklaşımı vardır:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Doğrulama bekleme süresini artırın" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Hata mesajından, ", _jsx(_components.code, { children: "toMatchElement" }), " için varsayılan bekleme süresinin 500ms olarak ayarlandığını görebiliriz. Bu süreyi şu şekilde fonksiyona ", _jsx(_components.code, { children: "timeout" }), " seçeneğini ekleyerek artırabiliriz:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toMatchElement('div[class=title]', {\n text: \"Alex'in Listesi\",\n timeout: 2000, // 2 saniye artırın\n});\n" }) }), "\n", _jsx(_components.p, { children: "Bu yaklaşım, başarısız testlerin meydana gelmesini biraz azaltabilir, ancak sorunu tamamen çözmez çünkü verilerin ne kadar sürede alınması gerektiğini kesin olarak bilemeyiz." }), "\n", _jsx(_components.p, { children: "Bu nedenle, yalnızca belirli bir bekleme süresinden emin olduğumuz durumlarda, bu yaklaşımı, örneğin \"bir öğenin üzerine 2 saniyeden fazla süreyle gelindikten sonra bir ipucunun (tooltip) belirlenmesi” gibi senaryolarda kullanırız." }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsx(_components.li, { children: "Bir doğrulama yapmadan önce ağ isteğinin tamamlanmasını bekleyin" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Bu doğru yaklaşımdır. Verinin ne kadar süreceğini bilmesek de, ağ isteğinin bitmesini beklemek her zaman güvenli bir seçimdir. Bu noktada, ağ isteklerinin tamamlanmasını beklemek için ", _jsx(_components.code, { children: "page.waitForNavigation({ waitUntil: 'networkidle0' })" }), " kullanabiliriz:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "\"uygulamanın başarıyla yüklenmesi gerekir\", async () => {\n\tawait page.goto('http://localhost:3000');\n\n\t/\n\t * Ağ isteklerinin sona ermesini bekleyin.\n\t * Hem uygulamanın hem de verilerin yüklendiğinden emin olun.\n\t */\n\tawait page.waitForNavigation({ waitUntil: 'networkidle0' });\n\n\tawait page.waitForSelector('#app');\n\tawait expect(page).toMatchElement('div[class=title]', {\n\t\ttext: \"Alex'in Listesi\",\n\t});\n});\n" }) }), "\n", _jsx(_components.p, { children: "Bu şekilde, uygulama ve yüklü verileri doğrulamak için bir doğrulama yapmadan önce ağ isteklerinin sona erdiğinden emin olabiliriz. Bu, testin sürekli olarak doğru sonuçlar vermesini sağlar." }), "\n", _jsxs(_components.h2, { id: "belirli-bir-düğmeye-tıklamayı-bekleyin", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#belirli-bir-düğmeye-tıklamayı-bekleyin", children: _jsx(_components.span, { children: "#" }) }), "Belirli bir düğmeye tıklamayı bekleyin"] }), "\n", _jsx(_components.p, { children: "Sonraki adımda, bir öğe içindeki kontrol et düğmesine tıklama işlevselliğini test ediyoruz." }), "\n", _jsxs(_components.p, { children: ["Örnek uygulamada, tüm öğelerin aynı yapıya sahip olduğunu fark ettik. Kontrol et düğmeleri, ", _jsx(_components.code, { children: "li[class$=item] > button" }), " CSS seçicisini kullanarak tıklanabilir ve düğme metni her zaman \"Kontrol Et\"tir. Bu nedenle hangi öğeye tıklanacağını doğrudan belirtmemiz mümkün değildir. Bu yüzden yeni bir çözüm bulmalıyız."] }), "\n", _jsx(_components.p, { children: "\"Logto başlarken dökümanını oku\" öğesinin kontrol et düğmesine tıklamak istediğimizi varsayalım. Bunu iki adıma ayırabiliriz:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "İlk olarak, belirtilen öğeye bir referans alın." }), "\n", _jsx(_components.li, { children: "Ardından, o öğe içindeki kontrol et düğmesine tıklayın." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "\"Logto dokümanını oku öğesinin kontrol et düğmesine tıklanabiliyor olması gerekir\", async () => {\n // Logto döküman öğesine referans alın\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Logto başlarken dökümanını oku' }\n );\n\n // İlgili düğmeye tıklanması gerektiğini doğrulayın\n await expect(readDocItem).toClick('button', { text: 'Kontrol Et' });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Kodda gösterildiği gibi, ", _jsx(_components.code, { children: "itemName" }), " \"Logto başlarken dökümanını oku\" olarak ayarlanmış öğeyi eşleştirmek için ", _jsx(_components.code, { children: "toMatchElement" }), " fonksiyonunu kullanıyoruz. Ardından ", _jsx(_components.code, { children: "readDocItem" }), " referansını kullanarak altında bulunan \"Kontrol Et\" metin içerikli düğmeye tıklıyoruz."] }), "\n", _jsxs(_components.p, { children: ["Önemli bir nokta, ", _jsx(_components.code, { children: "readDocItem" }), " referansını alırken kullanılan CSS seçicinin ", _jsx(_components.code, { children: "li[class$=item]:has(div[class$=itemName])" }), " olduğudur. Bu seçici öğenin kök ", _jsx(_components.code, { children: "li" }), " elemanını eşleştirir, çünkü sonrasında ", _jsx(_components.code, { children: "li" }), " etiketinin altında bulunan düğmeye tıklamayı amaçlıyoruz."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "expect(readDocItem).toClick" }), " kullanımı ", _jsx(_components.code, { children: "toMatchElement" }), "e benzer. Örnek kodda, düğmenin 'Kontrol Et' metin içeriğini daha fazla eşleştirmek için ", _jsx(_components.code, { children: "{ text: 'Kontrol Et' }" }), " geçiriyoruz. Ancak düğmenin metin içeriğini eşleştirip eşleştirmemek ihtiyaçlarınıza bağlıdır."] }), "\n", _jsxs(_components.h2, { id: "dış-bir-bağlantının-yeni-bir-sekmede-açıldığını-varsayın", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dış-bir-bağlantının-yeni-bir-sekmede-açıldığını-varsayın", children: _jsx(_components.span, { children: "#" }) }), "Dış bir bağlantının yeni bir sekmede açıldığını varsayın"] }), "\n", _jsx(_components.p, { children: "Sıradaki adımda, bir öğe notları içinde bulunan bağlantıya tıklanarak dış bir bağlantının yeni bir sekmede açılıp açılmadığını test etmek istiyoruz." }), "\n", _jsx(_components.p, { children: "Örnek uygulamada, \"Logto başlarken dökümanını oku\" öğesi, notlar içinde Logto dökümanına dış bir bağlantıya sahiptir. İşte test kodumuz:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "\"dış bir bağlantının yeni bir sekmede açılması gerekir\", async () => {\n // Spesifik öğeye daraltarak Logto döküman öğesine referans alın\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Logto başlarken dökümanını oku' }\n );\n\n await expect(readDocItem).toClick('div[class=itemNotes] a', { text: 'Başlarken' });\n\n const target = await browser.waitForTarget(\n (target) => target.url() === 'https://docs.logto.io/docs/tutorials/get-started'\n );\n\n const logtoDocPage = await target.page();\n expect(logtoDocPage).toBeTruthy();\n\n // Test ettikten sonra sayfayı kapatmayı unutmayın\n await logtoDocPage?.close();\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Kodda, ", _jsx(_components.code, { children: "toClick" }), " kullanarak ", _jsx(_components.code, { children: "itemNotes" }), " içindeki bağlantıya tıklıyoruz."] }), "\n", _jsxs(_components.p, { children: ["Sonrasında, ", _jsx(_components.code, { children: "browser.waitForTarget" }), " kullanarak \"", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started", children: "https://docs.logto.io/docs/tutorials/get-started" }), "\" URL'sine sahip yeni bir sekme yakalarız."] }), "\n", _jsxs(_components.p, { children: ["Sekme elde edildikten sonra, Logto döküman sayfasının bir örneğini almak için ", _jsx(_components.code, { children: "target.page()" }), " kullanıyoruz ve sayfanın yüklendiğinden emin oluruz."] }), "\n", _jsx(_components.p, { children: "Ayrıca, testimizi tamamladıktan sonra yeni açılan sayfayı kapatmayı unutmayın." }), "\n", _jsxs(_components.h2, { id: "formdan-bir-öğe-oluşturulacağını-varsayın", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#formdan-bir-öğe-oluşturulacağını-varsayın", children: _jsx(_components.span, { children: "#" }) }), "Formdan bir öğe oluşturulacağını varsayın"] }), "\n", _jsx(_components.p, { children: "Şimdi, bir öğe ekleme işlevini test etmek istiyoruz." }), "\n", _jsx(_components.p, { children: "Formdaki öğe adını ve öğe notlarını doldurmamız, \"Ekle\" düğmesine tıklamamız ve eklediğimiz içeriğin listede görünüp görünmediğini kontrol etmemiz gerekiyor:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "\"formdan bir öğe oluşturulacağını varsayın\", async () => {\n // Formu doldurun ve gönderin\n await expect(page).toFill('form input[name=itemName]', 'John ile iletişime geç');\n await expect(page).toFill('form input[name=itemNotes]', 'john@fake.com adresine e-posta gönderin');\n await expect(page).toClick('form button[type=submit]', { text: 'Ekle' });\n\n // Öğenin oluşturulduğunu varsayın\n await expect(page).toMatchElement('li[class$=item]:has(div[class$=itemName])', {\n text: 'John ile iletişime geç',\n });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Form içeriklerini doldurmak için ", _jsx(_components.code, { children: "expect(page).toFill(inputSelector, content)" }), " fonksiyonunu kullandığımızı fark edeceksiniz. Bu fonksiyon, girdideki tüm içeriği ", _jsx(_components.code, { children: "content" }), " ile değiştirecektir."] }), "\n", _jsxs(_components.p, { children: ["Eğer var olan içeriği değiştirmeden sadece bazı karakterler eklemek istiyorsanız, ", _jsx(_components.code, { children: "page.type(selector, content)" }), " kullanarak girdiye eklemek istediğiniz içeriği doğrudan ekleyebilirsiniz."] }), "\n", _jsxs(_components.p, { children: ["Ancak, formumuzda doldurulacak birçok alan varsa, ", _jsx(_components.code, { children: "toFill" }), " fonksiyonunu birden fazla kez çağırmak pek de uygun değildir. Bu durumda içerikleri tek bir çağrıda doldurmak için aşağıdaki yaklaşımı kullanabiliriz:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toFillForm('form', {\n itemName: 'John ile iletişime geç',\n itemNotes: 'john@fake.com adresine e-posta gönderin',\n});\n" }) }), "\n", _jsx(_components.p, { children: "Sağlanan nesne anahtarı, input elemanının name niteliğidir." }), "\n", _jsxs(_components.h2, { id: "özet", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#özet", children: _jsx(_components.span, { children: "#" }) }), "Özet"] }), "\n", _jsx(_components.p, { children: "jest-puppeteer kullanarak uçtan uca testler yaparken yaygın test gereksinimlerine yönelik basit bir örnek ve buna uygun kod yazma tekniklerini ele aldık. Umarız jest-puppeteer test kodu yazmanın temellerini hızlı bir şekilde kavramanıza yardımcı olabilir." }), "\n", _jsx(LogtoCloudButton, { children: "Bugün Logto'yu deneyin" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }